考虑有 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"
.
最佳答案
您可以将 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>
关于javascript - 以 Angular 切换表格行数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47979609/