在函数调用它之后执行 ngFor？答案

【问题标题】：Perform ngFor after function invokes it?在函数调用它之后执行 ngFor？
【发布时间】：2020-03-06 09:07:59
【问题描述】：

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

【问题讨论】：

仅在调用方法时将元素推送到您在 ngFor 中引用的数组中。保持简单。
我需要数组中的所有元素，这就是问题
你要实现分页吗？
使用无限滚动或分页组件会有帮助吗？
如果您用您正在尝试做的事情（视觉上）更新问题，这将对我们有所帮助。顺便说一句，ngFor 的数组长度通常是多少。

标签： jquery angular typescript ngfor

【解决方案1】：

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

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

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

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

【讨论】：

我的要求是，当组件最初加载时，它应该在 div 中呈现前 10 个元素，如果单击更多按钮，ngFor 应该在循环中呈现下一个 10
进行分页并以10个为一组获取记录并显示它

【解决方案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}}

【讨论】：

【解决方案3】：

我找到了解决方案，实际上其中一个 cmets 帮助了我。我有一个大数组，然后我只取了其中的一部分并在组件加载时渲染它。当单击更多按钮时，我将下一组数据推送到渲染数组中。当单击更多按钮时，我只需要更改主数组中 from 和 to 的索引值，因此只有几组数据被推送到渲染数组中。 *ngFor 非常棒。

【讨论】：