Angular 2 转换数据
Angular 2 有很多过滤器和管道可以用来转换数据。
小写
这用于将输入转换为全小写。
语法
Propertyvalue | lowercase
参数
None
Result
属性值将转换为小写。
例子
首先确保 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
参数
None.
Result
属性值将转换为大写。
例子
首先确保 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>
保存所有代码更改并刷新浏览器后,你将获得以下输出。
slice
这用于从输入字符串中分割一段数据。
语法
Propertyvalue | slice:start:end
参数
-
start : 这是切片应该开始的起始位置。
-
end : 这是切片应该结束的起始位置。
Result
属性值将根据开始和结束位置进行切片。
例子
首先确保 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] | sliceAngular 2 有很多过滤器和管道可以用来转换数据。2}}<br> The second Topic is {{appList[1] | sliceAngular 2 有很多过滤器和管道可以用来转换数据。3}}<br> The third Topic is {{appList[2]| slice小写3}}<br> </div>
保存所有代码更改并刷新浏览器后,你将获得以下输出。
date
这用于将输入字符串转换为日期格式。
语法
Propertyvalue | date:”dateformat”
参数
日期格式 : 这是输入字符串要转换成的日期格式。
Result
属性值将转换为日期格式。
例子
首先确保 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>
保存所有代码更改并刷新浏览器后,你将获得以下输出。
currency
这用于将输入字符串转换为货币格式。
语法
Propertyvalue | currency
参数
None.
Result
属性值将转换为货币格式。
例子
首先确保 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
参数
None
Result
属性值将转换为百分比格式。
例子
首先确保 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 : 这是最小的小数位数。
-
最大分数位数 : 这是小数位数的最大值。
Result
属性值将转换为百分比格式
例子
首先确保 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>
保存所有代码更改并刷新浏览器后,你将获得以下输出。