首页 文章

Angular 2 - ngFor管道后的索引

提问于
浏览 次
8

在Angular 2中使用ng时，如何在数组通过管道后获取对象内的原始索引？

例如，如果我有一个对象数组，如下所示：

list =  [{type:"A",id:111},{type:"A",id:222},{type:"B",id:333},{type:"A",id:444},{type:"B",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;
  }
angular

2 回答

  • 2

    您还可以使用 reduce 方法保留原始索引：

    @Pipe({
  name: 'appFilter',
  pure: false
})
export class AppFilterPipe implements PipeTransform {
  transform(values: any[], arg1: 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

    回复于
  • 10

    如果我理解你正确你想要原始列表的索引，那么你可以使用该过滤对象从原始列表中找出原始索引 .

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

    然后在您的组件中定义geIndex方法，该方法可以从原始列表中返回未被过滤的索引 .

    getIndex(item: Item) {
    return this.list.indexOf(this.list.filter((i, index) => item.id == i.id)[0])
}
    回复于

相关问题