在函数调用后执行 ngFor？

Question

我有很多数据要处理，所以当使用 ngFor 时，需要一些时间来呈现它。在正常的 Jquery 方式中，我使用了一个循环，当单击更多按钮时，它将呈现下一个 10 并使用 .append()。由于我正在使用 angular 我不想要 jQuery 方式。如果有的话，建议我另一种方式。

Answer 1

按照说明使用 trackBy (https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5)

我们可以通过提供 trackBy 函数帮助 Angular 跟踪添加或删除的项目。 trackBy 函数将索引和当前项目作为参数，需要 return 此项目的唯一标识符。现在，当您更改集合时，Angular 可以根据唯一标识符跟踪添加或删除了哪些项，并仅创建或销毁更改的内容。

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

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

Answer 2

<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 3

我找到了解决方案，实际上其中一条评论对我有所帮助。我有一个大数组，然后我只拿了它的一部分并在组件加载时渲染它。单击更多按钮时，我将下一组数据推送到呈现的数组中。单击更多按钮时，我只需更改主数组中 from 和 to 的索引值，因此只有几组数据被推入渲染数组。 *ngFor 绝对棒极了。

在函数调用后执行 ngFor？

Perform ngFor after function invokes it?

jquery

angular

typescript

ngfor