Angular 2: как применить предел к * ngFor?

поскольку фильтр Limit ушел из Angular 2, как я могу применить предел для простого оператора * ngFor в Angular 2?

<div *ngFor="#tweet of singleCategory">
  {{ tweet }}
</div>

Я не хочу, чтобы оператор * ngFor перебирал все элементы singleCategory, я хочу ограничить его только двумя результатами. Я считаю, что это можно сделать с помощью Custom Pipes, но я не знаю, как его реализовать.

Спасибо.

Ответы

Ответ 1

Вы можете применить ngIf к элементу с помощью индекса:

<div *ngFor=" let tweet of singleCategory;  let i=index">
    <div *ngIf="i<2">
        {{tweet}}
    </div>
</div>

Если вы не хотите обертывать div, проверьте синтаксис шаблона:

<div *ngFor="let tweet of singleCategory;  let i=index">
    <template [ngIf]="i<2">
        {{tweet}}
    </template>
</div>

В качестве альтернативы, фильтруйте элементы в компоненте с помощью фильтра и пользовательского получателя:

public get singleCategory() {
   return this.categories.filter((item, index) => index > 2 )
}

Существует также возможность создания канала. (См. Связанный дубликат)