列未显示 - mat-table

Question

我正在尝试将行删除添加到我的 <mat-table> 中。大多数 table 工作正常，除了未显示复选框列。以前，代码不包含  部分。我使用 angular.material.io.

上的示例之一添加了它

我有点困惑，因为在我看来模式应该是 <th> 和 <td> 包裹在 <ng-container> 中。我似乎在这里遗漏了一些东西，因为 checkbox/selection 列没有显示，浏览器控制台中没有任何错误，并且在 powershell 中的 ng serve 处也没有抛出任何错误.

<table mat-table [dataSource]="dataSource" matSort>

    <!-- Checkbox/Selection Column -->
    <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox [checked]="false" [aria-label]="checkboxLabel()">
            </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
            <mat-checkbox [checked]="true"></mat-checkbox>
        </td>
    </ng-container>

    <!-- Working Columns -->
    <ng-container *ngFor="let field of Fields" matColumnDef="{{field.name}}">
        <th class="w-134" mat-header-cell *matHeaderCellDef mat-sort-header>{{field.name}}</th>
        <td class="w-130" mat-cell *matCellDef="let row">
            <input *ngIf="field.editType == 'free'" matInput [(ngModel)]="row[field.name]" placeholder="{{row[field.name]}}" required>
            <mat-select *ngIf="field.editType == 'spinner'" [(ngModel)]="row[field.name]">
                <mat-option *ngFor="let option of field.options" [value]="option">{{option}}</mat-option>
            </mat-select>
            <div class="checkbox-cell" (click)="toggleBoolean(row, field.name)">
                <mat-checkbox *ngIf="field.editType == 'checkbox'" [(ngModel)]="row[field.name]" (click)="toggleBoolean(row, field.name)"></mat-checkbox>
            </div>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="ColumnHeaders"></tr>
    <tr mat-row *matRowDef="let row; columns: ColumnHeaders;"></tr>
</table>

Answer 1

您似乎没有在 TS 文件中的 ColumnHeaders 数组中添加该列。

ColumnHeaders = ['select'] //ColumnHeaders should have an entry of select(your checkbox column defintion)

Answer 2

是的，您必须在 displayedColumns

中添加 select

  displayedColumns: string[] = ['select','position', 'name','gender', 'weight', 'symbol'];

列未显示 - mat-table

Column not showing - mat-table

html

typescript

angular-material

angular

mat-table