mat-table指令未以全宽呈现

Question

我遇到一个奇怪的问题，在mat-table元素上的table指令不能完全渲染。没有与表，mat-table或表中任何元素关联的自定义样式。

表组件示例：

<datatable [data]="data" [headers]"headers"></datatable>

表格代码：

<table mat-table matSort [dataSource]="dataSource">
    <ng-container *ngFor="let header of headers" [matColumnDef]="header.value">
        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!sorting">
            {{header.name}}
        </th>
        <td mat-cell *matCellDef="let element">
            {{element[header.value]}}
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

如您所见，我正在使用* ngFor生成标题，而不是定义每列。这是我在此示例中使用的标题和数据：

headers: ITableHeader[] = [
    { name: 'ID', value: 'id' },
    { name: 'Name', value: 'name' },
    { name: 'Address', value: 'address' },
];
data = [
    { id: 0, name: 'name 0', address: 'address 0' },
    { id: 1, name: 'name 1', address: 'address 1' },
    { id: 2, name: 'name 2', address: 'address 2' },
    { id: 3, name: 'name 3', address: 'address 3' },
];

该组件初始化为空白MatTableDataSource。更改数据时，数据由this.dataSource.data = this.data;

设置

在检查完每个元素之后，我已经检查了元素检查器，无法弄清与常规表的不同之处。有人看过吗？

Answer 1

当我添加Bootstrap的table类时，该解决方案就会显示出来。我假设默认情况下，一个表会填充父容器。

要解决此问题，请创建一个具有属性width: 100%的类，并将其添加到table元素中。如果您使用Bootstrap，则已经有了一个帮助器类：w-100。

<table class="w-100" mat-table matSort [dataSource]="dataSource">
</table>

Answer 2

你可以直接使用 mat-table 标签代替 table 标签并去掉 mat-table 指令：

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

代替

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