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

【问题标题】：Angular NgFor iterate through x objects in arrayAngular NgFor 遍历数组中的 x 个对象
【发布时间】：2020-08-06 19:42:07
【问题描述】：

我想遍历数组的前四个对象。我想使用 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

【问题讨论】：

可以根据索引拼接用户```
{{user?.UserName}}
```
splice 只是删除了数组中的用户，对吧？
是的，在这种情况下你可以使用 slice

标签： html angular ngfor

【解决方案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>

【讨论】：

【解决方案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

【讨论】：