用于轨道号的角度2管道

时间:2016-06-12 09:47:42

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

我有这样的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
对于这项工作,

棱角2有PIPE?或者我们必须创建这样的管道?(如何)

2 个答案:

答案 0 :(得分:1)

您需要一个简单的分拣管道。当然,你也可以使它更通用:

@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例如用法

答案 1 :(得分:0)

你应该遵循angularjs 2文档

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

假设您的给定数据位于数组变量中。然后在模板化之前按照你希望展示dom的方式对数组进行排序