Angular 2 ngFor對偶數/奇數的項目

Question

我有一個包含2列的列表，我希望左邊顯示偶數和奇數。

目前我遍歷每列的整個列表，並用ngIf =「odd」或甚至過濾。

我可以讓ngFor只能做和觀看偶數或奇數指數嗎？

會大大提高性能嗎？我不知道當一半的DOM元素被納入時是多少負擔。

該列表不會頻繁更改，但當它發生更改時，它會完全更改。

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>