如何启用具有多选和动态列的 mat-table

Question

我正在尝试使用动态列启用多选选项。虽然动态列正在工作，但多选不起作用。

问候

jcm

<mat-table [dataSource]="dataSource" matSort="matSort">
        <ng-container [matColumnDef]="col.columnDef" *ngFor=" let col of displayColumns">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                {{ col.header }}
                <ng-container [matColumnDef]="select">
                    <th mat-header-cell *matHeaderCellDef>
                        <mat-checkbox #checkbox (change)="$event ? masterToggle() : null" [disabled]="isDisabled" [checked]="selectionTable.hasValue() && isAllSelected()"
                            [indeterminate]="selectionTable.hasValue() &&
                                                                              !isAllSelected()"></mat-checkbox>
                    </th>
                </ng-container>
            </th>
            <td mat-cell *matCellDef="let element ">{{ element[col.columnDef] }}</td>
            <td mat-cell *matCellDef="let row">
                <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selectionTable.toggle(row) : null" [checked]="selectionTable.isSelected(row)"></mat-checkbox>
            </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="columnDefs"></tr>
        <tr mat-row *matRowDef="let row; columns: columnDefs; "></tr>
    </mat-table>

Answer 1

你必须为多选列添加一个标题到displayColumns，当你使用*ngFor运行它们时，你必须使用*ngIf检查你是否在第一个标题中（属于多选列）或其他表头（属于动态列），分别创建表头和列。

你可以看到我在stackblitz做的一个例子。