我正在尝试在角度2模板(也称为视图)中大写字符串的单词但是我在控制台中收到以下错误并且应用程序未加载(显示空白页面):
错误:未捕获(在承诺中):错误:模板解析错误:管道 '利用'无法找到
我正在尝试执行以下操作。以下示例使用文字字符串进行说明。实际上,字符串将是角度2分量中的变量。
{{ 'heLlo woRld' | capitalize }} // outputs "HeLlo woRld" - Only "H" is capitalized
{{' heLlo woRld' |大写:'所有' }} //输出" HeLlo WoRld" - 两者都是" H"和" W"资本化
{{ '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标准,但应符合最佳实践,特别是:
注意:删除了短语" No ES3或ES5 code"因为这句话引起了一些混乱,并且还增加了我得到的错误。
答案 0 :(得分:-1)
我假设角度2提供了一个开箱即用的“大写”管道(就像它提供了“大写”管道一样)。因此,要解决此问题,请按如下方式创建“大写”管道:
或者,如果您使用的是angular-cli,则可以使用以下命令生成上述文件: ng g pipe capitalize
注意:您还必须修改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'|大写}} //输出“HeLlo woRld” - 只有“H”大写
{{'heLlo woRld'|大写:'all'}} //输出“HeLlo WoRld” - “H”和“W”都是大写的