如何使用* ngFor“显示更多"行 [英] How to 'show more' rows using *ngFor

问题描述

我有以下代码(头部简化-未测试)

I have the following code (simplified in head - not tested)

<div class="table">
  <div *ngFor="let item of list" class="row">
    {{ item.id }} {{ item.name }}
  </div>
</div>

<button (click)="more = !more">{{ more ? 'less':'more' }}</button>

我只想在开头显示前三个列表项-当用户单击更多"时，我想显示所有列表项.怎么做?

I want to show only the first 3 list items at the beginning - and when user clicks "more", I want to show all the list items. How to do it?

有关此情况下性能的更多详细信息，请这里

More details about performance for this case are here and here

推荐答案

使用 SlicePipe 的另一种方法:

Another approach using the SlicePipe:

<div class="table">
  <div *ngFor="let item of list | slice:0:(more ? undefined : 3)" class="row">
    {{ item }}
  </div>
</div>

<button (click)="more = !more">{{ more ? 'less':'more' }}</button>

此外，将of代替in与*ngFor一起使用.

Also, use of instead of in with *ngFor.

这篇关于如何使用* ngFor“显示更多"行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！