有什么方法可以在 angular 中使用 *ngFor 的前 5 个结果在浏览器中渲染和显示，其余的可以随着时间的推移加载

Question

我的应用程序需要一个解决方案，我要在卡片设计中显示来自一组对象的用户信息。我的数组大小为 100，它可以增长得更多。所以问题是，无论何时加载页面，都需要 3.5 秒来呈现 *ngFor 指令中的所有卡片组件。我想在用户转到 url 时首先显示至少 5 张用户卡片，并且最终可以在用户滚动时加载剩余的卡片。我已经看到不同的方法 none 符合这个标准 in *ngFor but my data do not change I have array of more than 100 users. 可能会给你帮助。

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

有什么方法可以在 angular 中使用 *ngFor 的前 5 个结果在浏览器中渲染和显示，其余的可以随着时间的推移加载

Is there any way I can use first 5 results from *ngFor in angular rendering and display in browser and remaining can load as time progress

angular

ngfor