javascript - 以 Angular 切换表格行数

Question

考虑有 35 行，默认情况下您必须显示 10 行，单击切换后它将显示 35 行，反之亦然。

现在我就是这样的

使用 bool 值 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>