Угловое / CSS форматирование таблицы.Форматирование таблицы блокировки объектов Div - PullRequest
Новая
       4

Угловое / CSS форматирование таблицы.Форматирование таблицы блокировки объектов Div

0 голосов
/ 08 октября 2018

У меня проблемы с этой таблицей: 

  <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>, и он работает, но затем я получаю th элементы, повторяющиеся для каждого набора ИКС, и пытаюсь удалить беспорядок.

1 Ответ

0 голосов
/ 08 октября 2018

Вы можете использовать HTML-элемент <ng-container>, который сообщает 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>

...