在 angular2 中的 ngFor 中显示更多按钮

我有超过 50 项的清单。我只想显示前 10 个项目，并且我将有一个按钮，单击该按钮会显示接下来的 10 个项目，再次单击该按钮会显示接下来的 10 个项目，直到显示所有项目。

<ul class="results-main-content">
  <li class="right-results-section">
    <ul class="_result-list">
      <li class="result" *ngFor="let searchResult of searchResults">
        {{searchResult.name}}
      </li>
    </ul>
  </li>
  <li class="showmore">
    <button class="show-more">
      <img class="more" src="_arrow-down.svg" alt="" />
    </button>
  </li>
</ul>

这可以在 Angular2 中实现吗？

如果是这样，请启发我和 SO 社区。

Thanks

您可以使用切片管道：

show = 5;

<li *ngFor="let searchResult of searchResults|slice:0:show let i=index">
  {{searchResult.name}}
  <button *ngIf="i==4 && show == 5" (click)="show = searchResults.length">More</button>
</li>

笨蛋的例子 https://plnkr.co/edit/ViTn7chwIVUoeHt6IIOK?p=preview

也可以看看

• 如何在 angular2 中显示 ngFor 中的 1 个元素？ https://stackoverflow.com/questions/42458664/how-to-show-1-element-in-ngfor-in-angular2