在 angular 中切换 table 行数

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>

我能够得到我想要的输出，但还有其他方法吗，我的意思是我有两次相同的 table 数据，即在 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 将该项目的属性切换为 render/unrender。

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

在 angular 中切换 table 行数

Toggling number of table rows in angular

javascript

ngfor

angular