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

【问题标题】：mat-table show colspan and rowspan conditionally inside *ngFor loopmat-table 在 *ngFor 循环内有条件地显示 colspan 和 rowspan
【发布时间】：2023-04-09 21:17:02
【问题描述】：

我想有条件地设置 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"。我怎样才能做到这一点我正在使用角材料垫表

【问题讨论】：

标签： javascript arrays angularjs angular angular-material

【解决方案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>

【讨论】：

@Micheal D 我收到一个 ERROR 错误：ngIfElse 必须是 TemplateRef，但收到了“[object Comment]”
{{grouping}} 为我工作！！
是的，我也更改了答案。带有模板 ref 的 else 块必须显式为 <ng-template>。