Angular/CSS 表格格式。 Div 对象阻止表格格式化

Question

我在使用这张表时遇到了问题：

  <table style="width: 100%">
    <tr>
      <th>Name</th>
      <th>Ref</th>
      <th>Res</th>
      <th>Pom</th>
    </tr>
    <div *ngFor="let set of ics">
      <tr>
        <td style="column-span: 4">{{set.section}}</td>
      </tr>
      <tr *ngFor="let ic of set.ic">
        <td>{{ic.name}}</td>
        <td>{{ic.ref}}</td>
        <td>{{ic.res}}</td>
        <td>{{ic.pom}}</td>
      </tr>
    </div>
  </table>

我希望它看起来像这样：

| Name             | ref | res | pom |
| section                            |
| d1               | 1   | 2   | 3   |
| d2               | 4   | 5   | 6   | 
| another section                    | 
| d1               | 7   | 8   | 9   |
| d2               | 10  | 11  | 12  |

但它看起来像这样：

| Name             | ref | res | pom |
| section |
| d1      | 1 | 2 | 3 |
| d2      | 4 | 5 | 6 | 
| another section |
| d1              | 7  | 8  | 9  |
| d2              | 10 | 11 | 12 |

我怀疑<div> 对象正在阻止行查看<div> 之外的行。这会阻止他们知道 # 列和宽度之类的东西。我不确定最好的解决方案是什么。

我在<table> 中尝试了*ngFor，它确实有效，但随后我得到每组ics 重复的th 元素，我正在尝试消除混乱。

Answer 1

您可以使用<ng-container> HTML 元素，它告诉 Angular 仅在 HTML 中呈现子视图而不是父视图：

<table style="width: 100%">
<tr>
  <th>Name</th>
  <th>Ref</th>
  <th>Res</th>
  <th>Pom</th>
</tr>
<ng-container *ngFor="let set of ics">
  <tr>
    <td style="column-span: 4">{{set.section}}</td>
  </tr>
  <tr *ngFor="let ic of set.ic">
    <td>{{ic.name}}</td>
    <td>{{ic.ref}}</td>
    <td>{{ic.res}}</td>
    <td>{{ic.pom}}</td>
  </tr>
</ng-container>