angular - 在 ngFor 中添加兄弟逻辑

Question

我在 Angular 模板中有一个表格，其行是通过使用 ngFor 指令对对象进行迭代生成的。示例代码:

<table *ngIf="results.length > 0" class="table table-hover">
  <thead>
    <tr>
      <th class="col-md-1">ID</th>
      <th class="col-md-3">Code</th>
      <th class="col-md-2">Type</th>
      <th class="col-md-4">Value(s)</th>
      <th class="col-md-2"><b class="invisible">.</b></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let r of results">
      <td class="col-md-1">{{r.id}}</td>
      <td class="col-md-3">{{r.code}}</td>
      <td class="col-md-2">{{r.type}}</td>
      <td class="col-md-4">{{r.values}}</td>
      <td class="col-md-2">
        <button (click)="add(r.id)">Add</button>
      </td>
    </tr>

    <tr class="hidden"> // <----- The following lines needs to repeat for all iterations
      <td colspan="5">
        // Some other code
      </td>
    </tr>
  </tbody>
</table>

我的目的是在 ngFor 生成的每一行下方获得一个完整的行，以便在点击每一行上的按钮时，我可以在包含的行下方显示相应的行按钮。

这是否可以通过简单的方式实现？

Answer 1

像这样使用 ng-container:

<ng-container *ngFor="let r of results">
  <tr>...</tr>
  <tr>...</tr>
</ng-container>