-2

我試圖在角度2模板(aka視圖)中大寫一個字符串的單詞,但在控制檯中出現以下錯誤,應用程序不加載(顯示空白頁):大寫字母的第一個單詞(或者可選的所有單詞)的大寫字母2+

Error: Uncaught (in promise): Error: Template parse errors: The pipe 'capitalize' could not be found

我正在嘗試以下操作。以下示例使用文字字符串進行說明。實際上,字符串將是角2分量中的變量。

  1. 如果未提供參數,則只能首字母大寫句子的第一個單詞。
{{ 'heLlo woRld' | capitalize }} // outputs "HeLlo woRld" - Only "H" is capitalized 
  • 通過使參數 '所有' 大寫字符串的所有單詞。
  • {{ 'heLlo woRld' | capitalize:'all' }} // outputs "HeLlo WoRld" - Both "H" and "W" are capitalized

  • 其他一些邊緣情況將被滿足是:
  • {{ 'a' | capitalize }}     // outputs "A" 
    
    {{ 'a' | capitalize:'all' }}    // outputs "A" 
    
    {{ '' | capitalize }}     // outputs nothing 
    
    {{ '' | capitalize:'all' }}    // outputs nothing 
    
    {{ null | capitalize }}     // outputs nothing 
    
    {{ null | capitalize:'all' }}   // outputs nothing 
    

    注意:請注意,溶液應該是基於純的JS(沒有csss),並且不必符合unicode,但應符合最佳實踐,特別是:

    1. 沒有第三方LIBRA應使用RY(如jQuery,下劃線,lodash)
    2. AND代碼應符合Typescript和ES6標準。

    注意:刪除了那句「沒有ES3和ES5代碼」,因爲這句話是造成一些混亂,並補充說,我得到的錯誤。

    +1

    是什麼?你嘗試至今:如下可以從你的模板(又名視圖)使用管道?似乎又是一個「爲我免費做」的「問題」除此之外......沒有es3或es5 ......你在開玩笑吧? – GottZ

    +0

    根據定義,所有ES3和ES5代碼**已經是** ES6。 – 2017-07-19 12:51:43

    +0

    是你在哪裏卡住了大寫的邏輯,或寫了一個Angular管道的機制,或者兩者都有/ – 2017-07-19 13:59:18

    回答

    -2

    我曾假設角2提供了一個「大寫」管道(就像它提供了「大寫」管道一樣)。因此,要解決問題,創造了「利用」管道如下:

    1. 創建一個名爲:capitalize.pipe.ts

    另外,如果您使用的角度,CLI,那麼你可以使用命令生成上面的文件:納克G管利用

    注意:您還需要修改您的modulg文件(如home.module.ts),包括新創建/生成的管道。

  • 修改新創建的/生成的文件如下:
  • import { Pipe, PipeTransform } from '@angular/core'; 
    
    // To be DRY, define a reusable function that converts a 
    // (word or sentence) to title case 
    
    const toTitleCase = (value) => { 
        return value.substring(0, 1).toUpperCase() + value.substring(1); 
        // alternately, can also use this: 
        // return value.charAt(0).toUpperCase() + value.slice(1); 
    }; 
    
    @Pipe({ 
        name: 'capitalize' 
    }) 
    export class CapitalizePipe implements PipeTransform { 
    
        transform(value: any, args?: any): any { 
        if (value) { 
         if (args === 'all') { 
         return value.split(' ').map(toTitleCase).join(' '); 
         } else { 
         return toTitleCase(value); 
         } 
        } 
        return value; 
        } 
    
    } 
    
  • 一旦完成以上,則
  • {{ 'heLlo woRld' | capitalize }} // outputs "HeLlo woRld" - Only "H" is capitalized

    {{ 'heLlo woRld' | capitalize:'all' }} // outputs "HeLlo WoRld" - Both "H" and "W" are capitalized

    +0

    這會因某些Unicode字符串而失敗。 – 2017-07-19 12:53:47

    +0

    Unicode是不是我的使用案例的要求.. –

    +0

    太棒了。讓我們編寫代碼,在將來某個時候以不可預見的方式破解代碼,只要它是一些其他可以解決問題的可憐的笨蛋,而不是我們。順便說一句,您在代碼中使用了** lot **的ES3和ES5。例如,'if'和'return'語句都是ES3,'.map'是ES5。 – 2017-07-19 13:58:22

    相關問題