5.1 | 管道 - RLwu/angular-start GitHub Wiki

| - 管道

从视图模型中直接获得的数据，不一定完全适合于人们查看。比如下面的模板显示一个班级所有学生的平均分：

<div>average ： {{ avgScore() }}</div>

运行起来，一切都很正常，只是这个数看起来有点刺眼：90.05555555555556 - 毫无必要的小数...

当然，我们可以修改一下avgScore()方法，让它返回一个最长两位小数的数：

avgScore(){
    var avg = this.data.map(a=>a.score).reduce((a,b) => a+b , 0) / this.data.length;
    return avg.toFixed(2);
}

不过这样处理有点不妥，我们只是希望这个数据展示的时候格式化一下，没必要修改控制类里的实现。更合理的处理方法是在表示层解决这个问题 - 在模板里改变数据的显示格式。

这就是Angular2中管道的作用：在模板中对输入数据进行变换，并输出变换后的结果。在模板中，使用|来调用一个管道操作，使用:来向管道传入参数。

{{ data | <pipename>:<arg1>:<arg2> }}

我们使用预置的DecimalPipe对平均数进行处理，保留两位小数：

<div>average ： {{ avgScore() | number:'2.2-2' }}</div>

number对应着DecimalPipe对象，:'2.2-2'表示调用这个这个管道时传入的参数为'2.2-2'，对于DecimalPipe，这三个2分别表示最少整数位、最少小数位和最多小数位。

现在，平均分的显示正常了：90.06。

例子

import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
import {CORE_DIRECTIVES} from "angular2/common";

@Component({
	selector:"ez-app",
	template:`	
		<h1>管道/Pipe</h1>
        <div *ngFor="#p of data">{{p.name}} : {{p.score}}</div>
        <hr>
        <div>{{avgScore() | number:'2.2-2'}}</div>
	`,
    directives:[CORE_DIRECTIVES],
    styles : [`div{max-width:200px;text-align:right;}`]
})
class EzApp{
	constructor(){
    	this.data = [
        	{name:'John',score:89},
            {name:'Mike',score:72},
            {name:'Linda',score:93.5},
            {name:'Luke',score:80},
            {name:'Jango',score:97},
            {name:'Ado',score:95},
            {name:'Peter',score:93}
            {name:'Mary',score:92},
            {name:'Tom',score:99}]
	}
    avgScore(){
    	return this.data.map(a=>a.score).reduce((a,b) => a+b , 0) / this.data.length;
    }
}
		
bootstrap(EzApp);

5.1 | 管道 - RLwu/angular-start GitHub Wiki

| - 管道

例子

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️