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

Question

I want the display only the first 3 items from a list using *ngFor 我想只使用*ngFor显示列表中的前3项

On my component, 在我的组件上，

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

On my template, 在我的模板上，

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

And note that, I want to apply the change only in the template itself not in the component. 请注意，我只想在模板中应用更改，而不是在组件中应用更改。

Answer 1

You can use the slice pipe for that 您可以使用slice管道

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

Answer 2

Using slice : 使用slice ：

Creates a new List or String containing a subset (slice) of the elements. 创建包含元素子集（切片）的新List或String。

array_or_string_expression | slice:start[:end]

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

Change your code: 更改您的代码：

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