嵌套循环：布局不当的 html 表格

【问题标题】：Nested loop: html table that is badly laid out嵌套循环：布局不当的 html 表格
【发布时间】：2023-02-20 23:08:04
【问题描述】：

通过嵌套循环，我不明白为什么 HTML 表格排列不当？

我认为这是一个 HTML/CSS 问题，但我觉得这是我的循环的问题？

  <table class="mb-5">
    <tr>
      <th>Code</th>
      <th>Vote</th>
    </tr>
    <ng-container>
      <tr *ngFor="let l of MET">
        <td>
          <ng-container *ngFor="let l of l.RESOLUTION">
            <tr>
              <td>{{ l.REF }}</td>
              <td>{{ l.ISSOUMISAUVOTE }}</td>
            </tr>
          </ng-container>
        </td>
      </tr>
    </ng-container>
  </table>

有一个演示here。

我从来没有遇到过这个问题，如果你有解决方案，我很感兴趣。

【问题讨论】：

标签： angular

【解决方案1】：

您的外部循环也需要是 ng-container，否则您将有一个额外的 <tr> 包装（检查生成的 HTML）。

<div class="container text-center" *ngIf="MET">
  <h2 class="pt-3 pb-3">HTML Table</h2>
  <table class="mb-5">
    <tr>
      <th>Isin</th>
      <th>Denomination</th>
    </tr>
    <tr *ngFor="let line of MET">
      <td>{{ line.ISINCODE }}</td>
      <td>{{ line.LABEL }}</td>
    </tr>
  </table>
  <br />
  <table class="mb-5">
    <tr>
      <th>Code</th>
      <th>Vote</th>
    </tr>
    <ng-container>
      <ng-container *ngFor="let l of MET">
          <ng-container *ngFor="let l of l.RESOLUTION">
            <tr>
              <td>{{ l.REF }}</td>
              <td>{{ l.ISSOUMISAUVOTE }}</td>
            </tr>
          </ng-container>
      </ng-container>
    </ng-container>
  </table>
</div>

【讨论】：

非常感谢你，你救了我！