Angular 4 - 限制显示的表格行数

【问题标题】：Angular 4 - Limiting number of table rows displayedAngular 4 - 限制显示的表格行数
【发布时间】：2017-05-14 03:24:34
【问题描述】：

我有一个我正在循环的条目列表，并且在每个条目之前我都会在表格中添加一行。我有大约 2000 个条目，因此表格需要一秒钟才能呈现。我如何将其限制为 50 或 100？

<ng-container *ngFor="let entry of entries">
  <tr *ngIf="entry['name'].startsWith(filter)">
    <td>{{ entry.name }}</td>
  </tr>
</ng-container>

这个问题与this one 不同，因为我仍然希望行在那里我只希望一次只显示 100 个。

【问题讨论】：

如果限制是恒定的，为什么不只从查询中返回有限的结果集？
@Haris 我希望能够通过过滤器找到所有数据我只是不希望在您开始搜索之前的最初 2000 年
How can I limit ngFor repeat to 10 items in Angular 2?的可能重复
@Matt 这确实限制了行，但是过滤器不适用于未显示的项目，这不是我想要的。
啊，对不起。我想您应该过滤组件中的整个列表，并仅将过滤后的数组传递给您的表格。使用异步管道应该可以减少等待时间。

标签： html angular typescript

【解决方案1】：

我建议你创建一个pipe 来过滤以特定字符开头的项目。

可以是这样的：

@Pipe({
  name: 'startsWith'
})
export class StartsWithPipe implements PipeTransform {

  transform(items: any[], prop: string, term: string): any[] {
    if (!Array.isArray(items) || !term) {
      return items;
    }

    const strTerm: string = term.toLowerCase();

    return items.filter(item => {
      return item[prop] && item[prop].toLowerCase().startsWith(strTerm);
    });
  }
}

因此，在模板中，您将startsWith 管道与SlicePipe 结合起来：

<div *ngFor="let item of items | startsWith: 'name': nameFilter | slice: 0: limit">
  {{item.name}}
</div>

请注意，nameFilter 和 limit 是变量。

DEMO

【讨论】：

非常感谢，这个演示真的很有帮助。