Angular 2 ngFor 偶数/奇数项目

Question

我有一个包含 2 列的列表，我希望左侧显示偶数索引，右侧显示奇数。

目前，我正在为每一列迭代整个列表，并使用 ngIf="odd"或 even 进行过滤。

我可以让 ngFor 只做并观察偶数或奇数索引吗？

这会大大提高性能吗？我不知道当一半的 DOM 元素被 ng-if 输出时，它的负担有多大。

该列表不会经常更改，但当它更改时，它会完全更改。

Answer 1

您可以创建一个只返回奇数 或偶数 项的管道

@Pipe({ name: 'evenodd' })
export class EvenOddPipe implements PipeTransform {
  transform(value:any[], filter:string) {
    if(!value || (filter !== 'even' && filter !== 'odd')) {
      return value;
    }
    return value.filter((item, idx) => filter === 'even' ? idx % 2 === 1 : idx % 2 === 0 );
  }
}

像这样使用它

<div *ngFor="let item of items | evenodd:'even'"></div>    
<div *ngFor="let item of items | evenodd:'odd'"></div>