我如何限制 ngFor？ [复制]答案

【问题标题】：How do I limit ngFor? [duplicate]我如何限制 ngFor？ [复制]
【发布时间】：2018-03-14 18:33:11
【问题描述】：

<tr *ngFor="let post of posts">

    <td>{{post.kind}}</td>
    <td>{{post.title}}</td>
    <td>{{post.author}}</td>
    <td>{{post.publisher}}</td>
    <td>{{post.year}}</td>
    <td>{{post.length}}</td>

  </tr>

问题是posts里面有超过200个对象，我想把它限制在10个，然后如果我点击下一个（或上一个），它会列出下一个/上一个10。我应该怎么做？

【问题讨论】：

标签： html angular

【解决方案1】：

您可以使用管道。实现这一点。管道方法可能如下所示：

public transform(items: [], limit: number) {
    return items.slice(0, limit);
}

在模板中：

*ngFor="let post of posts | limitPipe:20"

【讨论】：

【解决方案2】：

你可以这样做：

<div *ngFor="let post of posts" let-i="index">
  <li class="dropdown-item" (click)="onClick(item)" *ngIf="i<10">{{post .text}}</li>
</div>

【讨论】：