使用 *ngFor 创建的 HTML 表，填充了单独的 *ngFor，最后一列包含 *ngIf答案

【问题标题】：HTML table created using *ngFor, populated with a separate *ngFor, last column to contain *ngIf使用 *ngFor 创建的 HTML 表，填充了单独的 *ngFor，最后一列包含 *ngIf
【发布时间】：2019-02-26 13:37:00
【问题描述】：

新的堆栈溢出和相当新的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
    }
    ];

filteredReservations 是 firestore 获取请求返回的文档集合数组的 HTML 表：

    <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 将出现在满足条件的行中，最后一列将显示一个编辑图标，该图标将链接到添加新预订或编辑满足条件的存在。

当我尝试实现我的目标时，最后一列的重复次数与集合中的文档一样多，即我需要最后一列位于过滤的保留循环之外，但仍使用保留数据来检查 if条件。

我的目标是：1

我目前得到的：2

我已经尽力解释得最好，所以希望这是有道理的。

【问题讨论】：

如果你能提供一个 plunkr 会很有帮助
在我看来，这将涉及一些非常复杂的逻辑来保持这些数据不变。您可以考虑通过创建某种“分组依据”管道（网上有很多示例）来转换此数据的格式，您可以在其中按预订对每个表进行分组，然后是 ngFor 预订 -> ngFor 每个预订的表。如果我理解正确的话，这似乎就是你的意思。
我的目标是所有列的<td><span*ngIf="*ngIf="table.time == reservation.time && table.number == reservation.table">{{reservation.covers}}</span></td>

标签： angular ngfor angular-ng-if ng-template ng-container

【解决方案1】：

我不会在 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*/})
}

【讨论】：