以角度切换表格行的数量

Question

考虑有35行，默认情况下，你必须在点击切换时显示10行，它将显示35行，反之亦然。

现在我这样做

默认情况下，使用布尔值isCardOpen切换行数为false

<tr *ngFor="let item of total_items;let i = index">
    <ng-container *ngIf="!isCardOpen; else showFullList">
       <ng-container *ngIf="i<10">
           <td> My table data comes here </td>
        </ng-container>
    <ng-container>
    <ng-template #showFullList>
       <td> My table data again comes here but without if condition</td>
    <ng-template>
</tr>

我能够得到我想要的输出但是还有其他任何方式，我的意思是我有两次相同的表数据，即在showFullList模板和*ngIf="i<10"内。

Answer 1

您可以将ngIf更改为*ngIf="i < 10 || isCardOpen"，因此当isCardOpen = false时，只显示前十项。如果isCardOpen = true，那么所有项目显示（无论索引）。

<tr *ngFor="let item of total_items; let i = index">
    <ng-container *ngIf="i < 10 || isCardOpen"></ng-container>
</tr>

---

作为替代方案，您可以为每个项添加属性，并使用ngIf将该项的属性切换为渲染/取消渲染。

<tr *ngFor="let item of total_items">
    <ng-container *ngIf="item.isOpen"></ng-container>
</tr>