mat-table 在 *ngFor 循环中有条件地显示 colspan 和 rowspan
mat-table show colspan and rowspan conditionally inside *ngFor loop
我想有条件地设置 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
您可以使用 *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>
我想有条件地设置 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
您可以使用 *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>