Question

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

现在我正在这样做

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

<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>

以角度切换表格行的数量

1 个答案: