mat-table 在 *ngFor 循環內有條件地顯示 colspan 和 rowspan

Question

我想有條件地設置rowspan和colspan，所以基本上想在ngFor中設置第一列的rowspan為2，其他的colspan為2

    <ng-container matColumnDef="header-row-first-group">
        <th mat-header-cell *matHeaderCellDef [style.text-align]="center" [attr.rowspan]="2">
            No
        </th>
    </ng-container>
    <ng-container matColumnDef="header-row-sec-group">
        <th mat-header-cell *matHeaderCellDef [style.text-align]="center" [attr.colspan]="2">
            group 1
        </th>
    </ng-container>
    <ng-container matColumnDef="header-row-third-group">
        <th mat-header-cell *matHeaderCellDef [style.text-align]="center" [attr.colspan]="2">
            group 2
        </th>
    </ng-container>
    <ng-container matColumnDef="header-row-forth-group">
        <th mat-header-cell *matHeaderCellDef [style.text-align]="center" [attr.colspan]="2">
            group 3
        </th>
    </ng-container>
    <ng-container matColumnDef="header-row-fifth-group">
        <th mat-header-cell *matHeaderCellDef [style.text-align]="center" [attr.colspan]="2">
            group 4
        </th>
    </ng-container> 

已更改為

 <ng-container matColumnDef="header-row-{{i}}-group" *ngFor="let grouping of groupArr; let i = index">
        <mat-header-cell *matHeaderCellDef [style.text-align]="center" [attr.colspan]="2">
          {{grouping}}
        </mat-header-cell>
 </ng-container>

但我想為第一列設置 [attr.rowspan]="2" 並讓其他人擁有 [attr.colspan]="2"。 我怎樣才能做到這一點我正在使用 angular 材料墊表

Answer 1

您可以first使用*ngFor的局部變量。 它是 boolean 對於迭代的第一項包含true ，對於其他項包含false 。

<ng-container 
  matColumnDef="header-row-{{i}}-group" 
  *ngFor="let grouping of groupArr; let i=index; let f=first"
>
  <ng-container *ngIf="f; else colSpan">
    <mat-header-cell *matHeaderCellDef [style.text-align]="center" [attr.rowspan]="2">
      {{grouping}}
    </mat-header-cell>
  </ng-container>
  <ng-template #colSpan>
    <mat-header-cell *matHeaderCellDef [style.text-align]="center" [attr.colspan]="2">
      {{grouping}}
    </mat-header-cell>
  </ng-template>
</ng-container>

編輯： <ng-container> -> <ng-template>