Html 不错，mat table的默认视图

我在Angular 9中有代码来显示表格

<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>

但它不像文档中那样。我该换什么

---

像这样导入styles.css中的角度材质css

样式。css

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

---

在“tr”标签内添加“mat标题行”和“mat行””， 参考下面的代码

<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>

日期
{{element.date}日期：'yyyy-MM-dd'}
分钟
{{element.min}
马克斯
{{element.max}

确保已导入角度材质css。

<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>