Выполнить ngFor после того, как функция вызывает его?

Question

У меня много данных для обработки, поэтому когда используется ngFor, для его рендеринга требуется некоторое время. В обычном порядке Jquery я использовал al oop, и при нажатии кнопки «больше» он будет рендерить следующие 10 и использовал .append (). Поскольку я использую angular, я не хочу jQuery. Предложите мне другой способ, если таковой существует.

Answer 1

<ng-container *ngFor="let item of list" let-i="index">
  <li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-container

ближе к ответу {{item.text}}

Answer 2

Я нашел решение, на самом деле мне помог один из комментариев. У меня был большой массив, а затем я взял только его часть и обработал его при загрузке компонента. Когда нажата кнопка «больше», я поместил следующий набор данных в рендеринг-массив. Когда была нажата кнопка «more», мне просто пришлось изменить значения индекса from и to в основном массиве, поэтому только несколько наборов данных были помещены в отображаемый массив. * ngFor абсолютно потрясающий.

Answer 3

Используйте trackBy , как объяснено (https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5)

Мы можем помочь Angular отслеживать, какие элементы добавлены или удалены, предоставив функцию trackBy. Функция trackBy принимает индекс и текущий элемент в качестве аргументов и должна возвращать уникальный идентификатор для этого элемента. Теперь, когда вы меняете коллекцию, Angular может отслеживать, какие элементы были добавлены или удалены в соответствии с уникальным идентификатором, и создавать или уничтожать только те вещи, которые изменились.

<img *ngFor="let picture of pictures; trackBy: trackImageId" [src]="picture.path">

trackImageId(index: number, picture: PictureModel) {
        return picture.id;
}