怎样限制ngFor指令中显示的项数？

Question

我希望可以在列表中使用 *ngFor 只显示前三个项目。

在我的组件中，

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>

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

- Avinash Raj

---

不知道为什么在ngFor文档中没有提到slice方法。 - Avinash Raj

我也提供了文档链接。这是一个数组函数，所以它不在ngFor中给出。https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html - Praveen Kumar Purushothaman

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

- Günter Zöchbauer

---

感谢您 :) . . . .. . - Günter Zöchbauer

嗨..我在angular2选择器上卡住了，请帮忙..http://chat.stackoverflow.com/rooms/129925/angular2-learning。我相信这对你只需要10秒钟。 - Avinash Raj

请提供一个包含足够信息以诊断问题的源代码，并发布一个合适的问题。抱歉，我没有时间聊天。 - Günter Zöchbauer

Answer 2

使用slice：

创建一个包含元素子集（切片）的新列表或字符串。

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>

- Praveen Kumar Purushothaman