Question

我有一个循环的条目列表，在每个条目之前我已经向表中添加了一行。我有大约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个。

Answer 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

Angular 4 - 显示的表行数限制

1 个答案: