javascript - 用于轨道编号的 Angular 2 管

Question

我有这样的 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 吗？或者我们必须创建一个像这样的管道？(如何)

Answer 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 for example usage