Угловая 2 ngFor над четными/нечетными элементами

Question

У меня есть список с 2 столбцами, я хочу, чтобы слева отображались даже индексы и право на нечетные.

В настоящее время я повторяю весь список для каждого столбца и фильтрую его с помощью ngIf = "odd" или даже.

Могу ли я сделать ngFor только делать и смотреть четные или нечетные индексы?

Будет ли это улучшать производительность? Я не знаю, сколько издержек это, когда половина элементов 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>