I would like to be able to hide rows of my table when there are more than 10 rows and I've succeeded in doing the following:
<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>
However, once I edit the transactions$ observable array by deletion or addition, all rows are shown (including the ones that were previously not shown).
Is there something else I need to do in order to get the index working asynchronously?
Rather than hiding them, which still forces Angular to put the code in the DOM (and perform additional expensive change detection, etc), it would be better to have your observable be chained and produce the correct filtered output.
Potential example:
this.transactions$ = this.httpService.getTransactions();
this.truncatedTransctions$ = this.transactions$.map((transactions: any[]) => transactions.slice(0, 10));
Then use truncatedTransctions in your view with no ngClass.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments