Javascript 以角度切换表格行数

考虑有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内，您可以将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>