不错，mat-table 的默认视图

Question

我在 Angular 9 中有代码显示 table

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

    <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef> Date </th>
        <td mat-cell *matCellDef="let element"> {{element.date | date:'yyyy-MM-dd'}} </td>
    </ng-container>

    <ng-container matColumnDef="min">
        <th mat-header-cell *matHeaderCellDef> Min </th>
        <td mat-cell *matCellDef="let element"> {{element.min}} </td>
    </ng-container>

    <ng-container matColumnDef="max">
        <th mat-header-cell *matHeaderCellDef> Max </th>
        <td mat-cell *matCellDef="let element"> {{element.max}} </td>
    </ng-container>

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

我也有导入的模块

const materialModules = [
  CdkTableModule,
  MatTableModule,
];

但在文档中看起来不像。我应该改变什么。

Answer 1

像这样在 styles.css 中导入 angular material css。

styles.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Answer 2

在'tr[=16]中添加'mat-h​​eader-row'和'mat-row' =]'标签， 参考下面的代码

<ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef> Date </th>
    <td mat-cell *matCellDef="let element"> {{element.date | date:'yyyy-MM-dd'}} </td>
</ng-container>

<ng-container matColumnDef="min">
    <th mat-header-cell *matHeaderCellDef> Min </th>
    <td mat-cell *matCellDef="let element"> {{element.min}} </td>
</ng-container>

<ng-container matColumnDef="max">
    <th mat-header-cell *matHeaderCellDef> Max </th>
    <td mat-cell *matCellDef="let element"> {{element.max}} </td>
</ng-container>

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