Как включить мат-таблицу с мульти-выделением и динамическими столбцами

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 .