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

我在*ngFor中尝试过<table>，它确实起作用，但是随后我为每组ic重复了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表格式。 Div对象阻止表格式化

1 个答案: