Angular 2 – ngFor管道后的索引

前端之家收集整理的这篇文章主要介绍了Angular 2 – ngFor管道后的索引前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在Angular 2中使用ng时,如何在数组通过管道后获取对象内的原始索引?

例如,如果我有一个对象数组,如下所示:

list =  [{type:"A",id:111},{type:"A",id:222},{type:"B",id:333},id:444},id:555}];

并使用以下管道:

@Pipe({
  name: 'appFilter',pure: false
})
export class AppFilterPipe implements PipeTransform {
// Single Argument Filter
  transform(values: any[],arg1: any,arg2: any): any {
    return values.filter(value => value[arg1] === arg2);
  }
}

我创建一个ngFor如下:

<div *ngFor= "let item of list|AppFilter:'type':'B'|let index=index;trackBy:trackByIndex;">
 {{index}} - {{item.id}}
 <input [(ngModel)]="list[index]" placeholder="item">
</div>

这里的问题是ngFor返回的索引是基于AppFilter返回的索引为0和1的新数组.这将导致输入字段引用错误的索引,即它将显示类型A对象,因为它对应于索引0,原始列表中的1.为了得到B型,我真的需要指数2,4.

欣赏这方面的工作.我的组件中的trackByIndex目前看起来像:

trackByIndex(index: number,obj: any): any {
    return index;
  }
您还可以使用reduce方法保留原始索引:
@Pipe({
  name: 'appFilter',pure: false
})
export class AppFilterPipe implements PipeTransform {
  transform(values: any[],arg2: any): any {
    return values.reduce((acc,value,index) => 
       value[arg1] === arg2 ? [...acc,{ index,value }] : acc,[]);
  }
}

然后在HTML中

{{item.index}} - {{item.value.id}}

Plunker Example

猜你在找的Angularjs相关文章