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

你可以这样试试。使用 ngconainter 和 ng if 将用户数限制为 4。

<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

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

Angular NgFor iterate through x objects in array

html

angular

ngfor