用于轨道号的角 2 管道答案

【问题标题】：angular 2 pipe for track number用于轨道号的角 2 管道
【发布时间】：2016-10-12 20:57:51
【问题描述】：

我有这样的json：

[
{
 id : 4
},
{
 id : 3
},
{
 id : 2
},
{
 id : 1
}
]

我想在*ngFor创建一个管道，我的模板在渲染后变成这样（列表从小到大根据id）

<span><span><=== id =1
<span><span><=== id =2
<span><span><=== id =3
<span><span><=== id =4

angular 2 有 PIPE 用于这项工作吗？或者我们必须像这样创建一个管道？（HOW）

【问题讨论】：

标签： javascript angularjs angular angular-filters angular2-pipe

【解决方案1】：

您应该遵循 angularjs 2 文档

<span *ngFor="let item of array">id = {{item.id}}</span>

假设您给定的数据在 array 变量中。在模板化之前，按照您希望显示 dom 的方式对数组进行排序

【讨论】：

:||||没有男人，我的意思是列表从小到大根据id

【解决方案2】：

您需要一个简单的排序管道。当然你也可以让它更通用：

@Pipe({
    name: 'sortById',
    pure: true
})
export class IdSortPipe implements PipeTransform {

    transform(value: Array<any>, args:any[]):any {
        value.sort((a, b) => {
            return a.id - b.id;
        });

        return value;
    }
}

在您的模板中：

<span *ngFor="let obj of array | sortById">id = {{obj.id}}</span>

Plunker 示例用法

【讨论】：