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

您可以使用 pipe 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