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

Question

我想有条件地设置rowspan和colspan，所以基本上想在ngFor 内设置第一列的rowspan为2，另一列为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〃；。我如何才能做到这一点我正在使用角材料垫表

Answer 1

您可以使用*ngFor的局部变量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>