javascript - 如何限制在 ngFor 中显示的项目数量？

Question

我希望使用 *ngFor 仅显示列表中的前 3 项

在我的组件上，

formInputs: any = [
{name:'foo'},
{name: 'bar'},
{name: 'buzz},
{name: 'dhsfk'},
{name: 'sadsd'}
]

在我的模板上，

<div class="form-group label-floating" *ngFor="let input of formInputs">
{{input.name}}
</div>

请注意，我只想在模板本身而不是组件中应用更改。

Answer 1

您可以为此使用slice 管道

<div class="form-group label-floating" *ngFor="let input of formInputs | slice:0:3">
  {{input.name}}
</div>

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html