角度2 ng对于偶数/奇数项目

Question

我有一个列有2列,我希望左边显示偶数索引和右边奇数.

目前我正在迭代每列的整个列表,并使用ngIf ="odd"或甚至过滤进行过滤.

我可以制作仅用于观看偶数或奇数指数吗？

这会大大改善表现吗？我不知道当一半的DOM元素是ng-if'ed时,它有多少负担.

该列表不会经常更改,但在更改时,它会完全更改.

Answer 1

您可以创建仅返回odd或even项目的管道

@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>