mat-table 在 *ngFor 循环中有条件地显示 colspan 和 rowspan

Question

我想有条件地设置 rowspan 和 colspan 所以基本上想在 ngFor

中设置行跨度为 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 material mat-table

Answer 1

您可以使用 *ngFor 的 local variable first。它是布尔值，包含 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>

mat-table 在 *ngFor 循环中有条件地显示 colspan 和 rowspan

mat-table show colspan and rowspan conditionally inside *ngFor loop

javascript

arrays

angularjs

angular-material

angular