Angular NgFor遍历数组中的x个对象

Question

我想遍历数组的前四个对象。我想使用ngFor而不是像这样选择前四个对象：

{{ users[*]?.UserName }} 

*为0-3

我想使用此：

<div *ngFor="let user of users; let i = index" [attr.data-index]="i"> 
{{user?.UserName}}

这有效，但显示阵列中的所有用户，我只需要前4个（索引0-3）。有没有办法告诉ngFor这样的东西：i <4？

Answer 1

您可以尝试这样。如果将用户数限制为4，请使用ngconainter和ng。

<div *ngFor="let user of users; index as i" [attr.data-index]="i"> 
    <ng-container *ngIf="i<4">
       {{user?.UserName}}
    </ng-container>
</div>

Answer 2

您可以如下使用slice:0:3

<div *ngFor="let user of users | slice:0:3; let i = index" [attr.data-index]="i">

    {{user?.UserName}}

演示https://stackblitz.com/edit/angular-hjgubx