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列（列数为5），如下所示：

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

我很难做到这一点，因为您不能在一行上使用多个*（例如* ngFor和* ngIf。

有没有办法做到这一点？我确实考虑过将tr包裹在span之类的东西中，但是这使我的样式变了。

Answer 1

我不太了解您的要求，但是可以快速解决多个结构性指令。

您可以使用<ng-container>元素，该元素不会创建DOM节点。

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

满足条件时，上面的代码将生成一个div列表。

Answer 2

借助* 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>

使用引导程序和不同行类型的表的角度ngFor

2 个答案: