如何限制在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

Answer 2

使用slice：

  

创建一个包含元素子集（切片）的新List或String。

array_or_string_expression | slice:start[:end]

*ngFor="let input of formInputs | slice:0:3"

更改您的代码：

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