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文件中存在以下代码.
The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0] | lowercase}}
The second Topic is {{appList[1] | lowercase}}
The third Topic is {{appList[2]| lowercase}}
输出
保存所有代码更改并刷新浏览器后，您将获得以下输出.
大写
这用于将输入转换为全部大写.
语法
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文件中存在以下代码.
The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0] | uppercase }}
The second Topic is {{appList[1] | uppercase }}
The third Topic is {{appList[2]| uppercase }}
输出
保存所有代码更改并刷新浏览器后，您将获得以下输出.
切片
这用于从输入字符串中对一段数据进行切片.
语法
Propertyvalue | slice: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文件中存在以下代码.
The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0] | slice:1:2}}
The second Topic is {{appList[1] | slice:1:3}}
The third Topic is {{appList[2]| slice:2:3}}
输出
保存所有代码更改并刷新浏览器后，您将获得以下输出.
date
这用于将输入字符串转换为日期格式.
语法
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文件中存在以下代码.
The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}
输出
保存所有代码更改并刷新浏览器后，您将获得以下输出.
currency
这用于将输入字符串转换为货币格式.
语法
Propertyvalue | currency
参数
无.
结果
属性值将转换为货币格式.
示例
首先确保应用程序中存在以下代码. 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文件中存在以下代码.
The currency of this Tutorial is {{newValue | currency}}
输出
保存所有代码更改并刷新浏览器后，您将获得以下输出.
百分比
这用于将输入字符串转换为百分比格式.
语法
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文件中存在以下代码.
The percentage is {{newValue | percent}}
输出
保存所有代码更改并刷新浏览器后，您将获得以下输出.
管道百分比的另一种变化如下.
语法
Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’参数
minIntegerDigits : 这是整数位数的最小数量.
minFractionDigits : 这是小数位数的最小数量.
maxFractionDigits : 这是小数位数的最大数量.
结果
属性值将被转换百分比格式
示例
首先确保app.component.ts文件中存在以下代码.
来自'@ angular/core'的
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文件中存在以下代码.
The percentage is {{newValue | percent:'2.2-5'}}
输出
保存所有代码更改并刷新浏览器后，您将获得以下输出.
