新的堆栈溢出和相当新的 Angular - 比如说中级。
所以我有一个问题,我使用 *ngFor 循环来创建和填充 HTML 表的前三列,然后我想使用单独的 *ngFor 条件循环遍历来自 firestore 数据库的文档集合以填充满足特定条件的表的行,直到我希望应用if条件以应用内容的两个选项之一的最后一列。
用文字来描述会让人困惑,所以这里有一些代码可以画出更好的画面:
用于创建 HTML 表的 JSON:
tables: any [] = [
{
'time': 1200,
'number': 1,
'covers': 2
},
{
'time': 1200,
'number': 2,
'covers': 2
},
{
'time': 1200,
'number': 3,
'covers': 2
},
{
'time': 1230,
'number': 1,
'covers': 2
},
{
'time': 1230,
'number': 2,
'covers': 2
},
{
'time': 1230,
'number': 3,
'covers': 2
},
{
'time': 1300,
'number': 3,
'covers': 2
},
{
'time': 1300,
'number': 1,
'covers': 2
},
{
'time': 1300,
'number': 2,
'covers': 2
},
{
'time': 1300,
'number': 3,
'covers': 2
}
];
在 HTML 表中,filteredReservations 是由 firestore 获取请求返回的文档集合的数组:
<table class="table">
<thead>
<th>Time</th>
<th>Table</th>
<th>Covers</th>
<th>Name</th>
<th>Contact</th>
<th>Created By</th>
<th>Status</th>
<th>Actions</th>
</thead>
<tbody>
<tr *ngFor="let table of tables">
<td>{{table.time}}</td>
<td>{{table.number}}</td>
<ng-container *ngFor="let reservation of filteredReservations">
<ng-container *ngIf="table.time == reservation.time && table.number == reservation.table">
<td>{{reservation.covers}}</td>
<td>{{reservation.name}}</td>
<td>{{reservation.contact}}</td>
<td>{{reservation.createdBy}}</td>
<td>{{reservation.status}}</td>
<ng-container>
<td *ngIf="table.time == reservation.time && table.number == reservation.table; else empty">
<button mat-icon-button [routerLink]="['/new', reservation.id]">
<mat-icon>edit</mat-icon>
</button>
</td>
</ng-container>
</ng-container>
</ng-container>
</tr>
</tbody>
</table>
<ng-template #empty>
<td>
<button mat-icon-button [routerLink]="['/new']">
<mat-icon>edit</mat-icon>
</button>
</td>
</ng-template>
预期结果是将使用第一个 *ngFor 创建 HTML 表,filteredReservations 将出现在满足条件的行中,最后一列将显示一个编辑图标,该图标将链接到添加新预订或编辑现有 where条件满足。
当我试图实现我对最后一列的目标时,重复的次数与集合中的文档一样多,即我需要最后一列位于filteredReservations 循环之外,但仍使用保留数据来检查if 条件。
我的目标:1
我目前得到的:2
我试图尽可能地解释,所以希望这是有道理的。