Как я могу применить количественное ограничение к *ngFor?

Question

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

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

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

Спасибо.

Answer 1

Вы можете применить ngIf к элементу, используя индекс:

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

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

<ng-template ngFor let-tweet [ngForOf]="singleCategory" let-i="index">
    <div [ngIf]="i<2">
        {{tweet}}
    </div>
</ng-template>

Желательно сначала / вместо этого фильтровать элементы в вашем компоненте, используя фильтр, чтобы избежать ненужных циклов при отображении ваших данных:

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

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