Angular 2使用带有异步管道和索引的ngFor

Question

我希望能够在超过10行时隐藏我的表格行，并且我已成功完成以下操作：

<tbody>
  <transaction-row
    *ngFor="let transaction of (transactions$ | async); let i = index;"
    [transaction]="transaction"
    [index]="i"
    [ngClass]="i >= num_hidden ? 'show' : 'hide'"
  ></transaction-row>
</tbody>

但是，一旦我通过删除或添加来编辑transactions$可观察数组，就会显示所有行（包括之前未显示的行）。

为了让索引异步工作，我还需要做些什么吗？

Answer 1

而不是隐藏它们，这仍然迫使Angular将代码放入DOM中（并执行额外的昂贵的更改检测等），最好将您的observable链接起来并生成正确的过滤输出。

潜在的例子：

this.transactions$ = this.httpService.getTransactions();
this.truncatedTransctions$ = this.transactions$.map((transactions: any[]) => transactions.slice(0, 10));

然后在视图中使用truncatedTransctions而不使用ngClass。