угловой ngFor для таблиц с использованием начальной загрузки и разных типов строк

Question

У меня есть эта таблица:

<div class="table-responsive" *ngIf="rows">
  <table class="table table-borderliness table-product">
    <tbody>
      <tr class="d-flex" *ngFor="let row of rows">
        <td class="d-flex align-items-center justify-content-center col-3" [class.table-active-primary]="column.class" *ngFor="let column of row.columns; let i = index" [scope]="i ? '' : 'row'">
          <div [ngSwitch]="row.description.length && !i">
            <span *ngSwitchCase="0">{{ column.name }}</span>
            <span *ngSwitchDefault>
              <a href="#" (click)="showDescription($event, column.name)">{{ column.name}} <i class="far fa-plus-square"></i></a>
            </span>
          </div>
        </td>  
      </tr>
    </tbody>
  </table>
</div>

В которой перечислены нагрузки строк с 5 столбцами.Что выглядит примерно так:

https://codepen.io/r3plica/pen/yRzpGy

Теперь между каждой строкой я хотел бы вставить еще один «тип» строки, который имеет только 1 столбец (с colspan 5) вот так:

https://codepen.io/r3plica/pen/oaGpRo

Я изо всех сил пытаюсь сделать это, потому что вы не можете иметь несколько * в одной строке (например, * ngFor и * ngIf.

Есть ли способ сделать это? Я действительно думал обернуть мой tr в span или что-то, но это выбрасывает мой стиль.

Answer 1

С помощью * ngContainer

<div class="table-responsive" *ngIf="rows">
  <table class="table table-borderliness table-product">
    <tbody>
      <ng-container *ngFor="let row of rows">
      <tr class="d-flex">
        <td class="d-flex align-items-center justify-content-center col-3" [class.table-active-primary]="column.class" *ngFor="let column of row.columns; let i = index" [scope]="i ? '' : 'row'">
          <div [ngSwitch]="row.description.length && !i">
            <span *ngSwitchCase="0">{{ column.name }}</span>
            <span *ngSwitchDefault>
              <a href="#" (click)="showDescription($event, column.name)">{{ column.name}} <i class="far fa-plus-square"></i></a>
            </span>
          </div>
        </td>  
      </tr>
        <tr class="d-flex">
        <td class="d-flex align-items-center justify-content-center col-3" [class.table-active-primary]="column.class"> This is one column
        </td>  
      </tr>
    </ng-container>
    </tbody>
  </table>
</div>

Answer 2

Я не совсем понимаю, о чем вы спрашиваете, но есть быстрый обходной путь для нескольких структурных директив.

Вы можете использовать элемент <ng-container>, который не создает узла DOM.

<ng-container *ngIf="myCondition">
  <div *ngFor="let item of items">...<div>
</ng-container>

Приведенный выше код создаст список div, когда условие будет выполнено.