Angular Template expression operators介绍

116 阅读1分钟

Angular template expression language是对JavaScript语法的增强和补充。

pipe operator

用法和操作系统里讲到的管道类似。

例子:

Title through uppercase pipe: {{title | uppercase}}

pipe工作时也允许传入参数:

Manufacture date with date format pipe: {{item.manufactureDate | date:'longDate'}}

json pipe对调试很有用:

Item json pipe: {{item | json}}

safe navigation operator

下面的html代码,如果属性nullItem为null,
The null item name is {{nullItem.name}}

Angular在渲染时会抛出异常:

TypeError: Cannot read property ‘name’ of null.

解决方案:

The null item name is {{nullItem?.name}}

这样当Angular检测到nullItem为null时,会停止对表达式的evaluation,这样不会导致view的渲染出错。

@any function

<p>The item's undeclared best by date is: {{$any(item).bestByDate}}</p>

上面的$any可以避免Angular编译器报错:bestByDate is not a member of the item object