angular - 使用 *ngFor 创建的 HTML 表,填充了单独的 *ngFor,最后一列包含 *ngIf
问题描述
新的堆栈溢出和相当新的 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
我试图尽可能地解释,所以希望这是有道理的。
解决方案
我不会在 html 中进行迭代。更喜欢在 component.ts 中执行此操作:
<tbody>
<tr *ngFor="let table of tables" >
<td>{{table.time}}</td>
<td>{{table.number}}</td>
<ng-template let-reservation="findReservation(table)">
<td>{{reservation.covers}}</td>
<td>{{reservation.name}}</td>
<td>{{reservation.contact}}</td>
<td>{{reservation.createdBy}}</td>
<td>{{reservation.status}}</td>
<td *ngIf="reservation">
<button mat-icon-button [routerLink]="['/new', reservation.id]">
<mat-icon>edit</mat-icon>
</button>
</td>
</ng-template>
</tr>
</tbody>
和
findReservation(table: Table): Reservation {
return this.filteredReservations.find(reservation => {/*your check*/})
}
推荐阅读
- plotly - 在 Jupyter Notebook 中从 Plotly 导出静态图像的问题
- r - 理解 R 控制台与在文本文件中编写 R 代码
- android - Naitve 模块 NativeUnimoduleProxy 试图覆盖 NativeModulesProxy。检查 MainAppication.java 中的 getPackages() 方法(在 React Native 中)
- flutter - Flutter:读取文件内容
- javascript - DropzoneJS S3直接上传405方法不允许
- php - 从商店隐藏产品类别,但将它们保留在侧边栏上
- microservices - 黑白 cqrs 和主从架构的区别?
- api - 为 API 服务器使用 SSL 证书是否需要域?
- java - org.springframework.data.neo4j.core.mapping.NoRootNodeMappingException:在 Record<> 中找不到可映射的节点或关系
- postgresql - 使用 pgsql-listen-exchange 在 RabbitMQ 中添加新的交换失败