Angular 2有很多可用于转换数据的过滤器和管道。

小写

这用于将输入转换为所有小写字母。

句法

Propertyvalue | lowercase 

参量

没有

结果

该属性值将转换为小写。

例

首先，确保以下代码存在于app.component.ts文件中。

import {    Component } from '@angular/core'; @Component ({    selector: 'my-app',    templateUrl: 'app/app.component.html' }) export class AppComponent {    TutorialName: string = 'Angular JS2';    appList: string[] = ["Binding", "Display", "Services"]; }

接下来，确保在app / app.component.html文件中存在以下代码。

<div>    The name of this Tutorial is {{TutorialName}}<br>     The first Topic is {{appList[0] | lowercase}}<br>    The second Topic is {{appList[1] | lowercase}}<br>    The third Topic is {{appList[2]| lowercase}}<br> </div> 

输出量

保存所有代码更改并刷新浏览器后，您将获得以下输出。

大写

这用于将输入转换为全部大写。

句法

Propertyvalue | uppercase 

参量

没有。

结果

该属性值将转换为大写。

例

首先，确保以下代码存在于app.component.ts文件中。

import {    Component } from '@angular/core';@Component ({    selector: 'my-app',    templateUrl: 'app/app.component.html' }) export class AppComponent {    TutorialName: string = 'Angular JS2';    appList: string[] = ["Binding", "Display", "Services"]; } 

接下来，确保在app / app.component.html文件中存在以下代码。

<div>    The name of this Tutorial is {{TutorialName}}<br>     The first Topic is {{appList[0] | uppercase }}<br>    The second Topic is {{appList[1] | uppercase }}<br>    The third Topic is {{appList[2]| uppercase }}<br> </div>

输出量

保存所有代码更改并刷新浏览器后，您将获得以下输出。

片

这用于从输入字符串中分片数据。

句法

Propertyvalue | slice:start:end 

参量start-这是切片应从其开始的起始位置。end-这是切片应从其开始的起始位置。结果

将根据起点和终点位置对属性值进行切片。

例

首先确保在app.component.ts文件中存在以下代码

import {   Component} from '@angular/core';@Component ({   selector: 'my-app',   templateUrl: 'app/app.component.html'})export class AppComponent {   TutorialName: string = 'Angular JS2';   appList: string[] = ["Binding", "Display", "Services"];}

接下来，确保在app / app.component.html文件中存在以下代码。

<div>    The name of this Tutorial is {{TutorialName}}<br>     The first Topic is {{appList[0] | slice:1:2}}<br>    The second Topic is {{appList[1] | slice:1:3}}<br>    The third Topic is {{appList[2]| slice:2:3}}<br> </div> 

输出量

保存所有代码更改并刷新浏览器后，您将获得以下输出。

日期

这用于将输入字符串转换为日期格式。

句法

Propertyvalue | date:”dateformat” 

参量

dateformat-这是输入字符串应转换为的日期格式。

结果

该属性值将转换为日期格式。

例

首先，确保以下代码存在于app.component.ts文件中。

import {    Component } from '@angular/core';  @Component ({    selector: 'my-app',    templateUrl: 'app/app.component.html' }) export class AppComponent {    newdate = new Date(2016, 3, 15); }

接下来，确保在app / app.component.html文件中存在以下代码。

<div>    The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>  </div>

输出量

保存所有代码更改并刷新浏览器后，您将获得以下输出。

货币

这用于将输入字符串转换为货币格式。

句法

Propertyvalue | currency 

参量

没有。

结果

属性值将转换为货币格式。

例

首先，确保以下代码存在于app.component.ts文件中。

import {    Component } from '@angular/core';  @Component ({    selector: 'my-app',    templateUrl: 'app/app.component.html' }) export class AppComponent {    newValue: number = 123; } 

接下来，确保在app / app.component.html文件中存在以下代码。

<div>    The currency of this Tutorial is {{newValue | currency}}<br>      </div>

输出量

保存所有代码更改并刷新浏览器后，您将获得以下输出。

百分比

这用于将输入字符串转换为百分比格式。

句法

Propertyvalue | percent 

参量

没有

结果

该属性值将转换为百分比格式。

例

首先，确保以下代码存在于app.component.ts文件中。

import {    Component } from '@angular/core';  @Component ({    selector: 'my-app',    templateUrl: 'app/app.component.html' }) export class AppComponent {    newValue: number = 30; } 

接下来，确保在app / app.component.html文件中存在以下代码。

<div>   The percentage is {{newValue | percent}}<br> </div>

输出量

保存所有代码更改并刷新浏览器后，您将获得以下输出。

百分比管道还有另一种变化，如下所示。

句法

Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’

参量minIntegerDigits-这是最小整数位数。minFractionDigits-这是最小的小数位数。maxFractionDigits-这是小数位数的最大数目。结果

属性值将转换为百分比格式

例

首先，确保以下代码存在于app.component.ts文件中。

import {    Component } from '@angular/core';  @Component ({    selector: 'my-app',    templateUrl: 'app/app.component.html' }) export class AppComponent {    newValue: number = 0.3; }

接下来，确保在app / app.component.html文件中存在以下代码。

<div>    The percentage is {{newValue | percent:'2.2-5'}}<br>  </div> 

输出量

保存所有代码更改并刷新浏览器后，您将获得以下输出。