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

Question

我遇到了这个问题table：

  <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> 之外的行。这使他们无法了解#columns 和 width 之类的信息。我不确定最好的解决方案是什么。

我已经在 <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>

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

Angular/CSS table formatting. Div objects blocking table formatting

html

css

ngfor

angular