Angular管道操作符(|)

前端之家收集整理的这篇文章主要介绍了Angular管道操作符(|)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、模板表达式操作符

模板表达式语言使用了JavaScript 语法的子集,并补充了几个用于特定场景的特殊操作符:管道操作符、安全导航操作符。

二、管道操作符 (|)

在绑定之前,表达式的结果可能需要一些转换。例如,可能希望吧数字显示成金额、强制文本变成大写,或者过滤列表以及进行排序。

Angular 管道对象这样的小型转换来说是个很方便的选择。

管道是一个简单的函数,它接受一个输入值,并返回转换结果。

Angular 的常用内置管道函数

DatePipe,UpperCasePipe,LowerCasePipe,CurrencyPipi,PercentPipe,JsonPipe等。

它们用于模板表达式中,只要使用管道操作符(|) 就行了。

管道操作符会把它左侧的表达式结果传给它右侧的管道函数。还可以通过多个管道串联表达式。

<div>
  Title through a pipe chain:
  {{title | uppercase | lowercase}}
</div>

常用实例:
  <div class="alert alert-warning">
    <p>{{title|uppercase }}</p>
    <p>{{title|uppercase|lowercase }}</p>
    <p>{{this|json}}</p>
    <p>{{time|date:'yyyy-MM-dd'}}</p>
    <p>{{number|percent}}</p>
    <p>{{number|currency:'CNY'}}</p>
  </div>

ts 属性
export class AppComponent {
  title = 'app';
  name = '张三丰';

  time = new Date();
  number = 1.123;

  show(str: string) {
    str += '---测试';
    return str;
  }
}

显示结果:


更多:

Angular 安全导航操作符(?.)和空属性路径

Angular2开发环境搭建之VS Code

Angular CLI简介2

猜你在找的Angularjs相关文章