我有没有办法在角度渲染中使用*ngFor的前5个结果并在浏览器中显示，其余的可以随着时间的推移加载

Question

我需要一个应用程序的解决方案，在该解决方案中，我将在卡设计中显示来自对象阵列的用户信息。我的数组大小为100，它可以增长得更多。所以问题是，每当页面加载时，在*ngFor指令中呈现所有卡组件都需要3.5秒。当用户访问该url时，我想在第一次访问中显示至少5张用户卡，剩下的卡最终可以在用户滚动时加载。我见过不同的方法，因为它们都不符合这个标准——这是在*ngFor中使用trackBy，但我的数据没有改变——我有100多个用户。这是*ng的链接。对于用法，它可能会给你帮助。

<ng-container *ngFor="let user of userList">
<app-display-user
[userDetail]="user"
[sectionDivisionEnable]="sectionDivisionEnable"
[isTileView]="isTileView"
(selectUser)="onSelect($event)"
></app-display-user>
</ng-container>

Answer 1

您可以执行以下操作，至于希望如何加载更多内容，您可以选择希望如何增加该数字，为了简单起见，我只使用了一个按钮。这假设您没有访问API的权限(如果您从API中提取这些数据(，如果您这样做，我建议您在那里实现分页。

<ng-container *ngFor="let user of userList; let i = index">
<app-display-user
*ngIf="i < currentValueToShow"
[userDetail]="user"
[sectionDivisionEnable]="sectionDivisionEnable"
[isTileView]="isTileView"
(selectUser)="onSelect($event)"
></app-display-user>
</ng-container>
<button (click)="currentValueToShow = currentValueToShow + 5">Show More</button>

currentValueToShow: number = 5;