具有静态数据的材料设计数据表布局

Question

如何在没有数据源(静态数据(的情况下使用材料设计数据表布局？我在 https://material.angular.io/components/table/examples 上找不到这个用例的示例。例如，我尝试了以下内容但没有成功。

<mat-table>
<mat-header-row>
<mat-header-cell>One</mat-header-cell>
<mat-header-cell>Two</mat-header-cell>
</mat-header-row>
<mat-row>
<mat-cell>aaa</mat-cell>
<mat-cell>bbb</mat-cell>
</mat-row>
</mat-table>

我收到以下错误：

LeistungenComponent.html:195 ERROR Error: StaticInjectorError(AppModule)[MatCell -> CdkColumnDef]: 
StaticInjectorError(Platform: core)[MatCell -> CdkColumnDef]: 
NullInjectorError: No provider for CdkColumnDef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
at resolveToken (core.js:1232)
at tryResolveToken (core.js:1182)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
at resolveToken (core.js:1232)
at tryResolveToken (core.js:1182)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
at resolveNgModuleDep (core.js:9238)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9919)
at resolveNgModuleDep (core.js:9238)

Answer 1

在 app.module.ts 中，添加到提供程序

providers:[CdkColumnDef]

添加到导入

import { CdkColumnDef } from '@angular/cdk/table';

Answer 2

据我所知，您不能像使用普通的HTML表那样使用材料表。您将需要一个数据源。

不过，有两种方法可以获取材质表的样式。您可以使用 Material Design Lite 或使用 Material Table 中的 css 样式。

请参阅此 Git Hub 线程以获取解决方案。 https://github.com/angular/material2/issues/3805

<style>
.mat-table {
display: block;
font-family: Tahoma, Verdana;
}
.mat-row,
.mat-header-row {
display: flex;
border-bottom-width: 1px;
border-bottom-style: solid;
align-items: center;
min-height: 48px;
padding: 0 24px;
}
.mat-cell,
.mat-header-cell {
flex: 1;
overflow: hidden;
word-wrap: break-word;
}
</style>
<div class="mat-table">
<div class="mat-header-row">
<div class="mat-header-cell">One</div>
<div class="mat-header-cell">Two</div>
<div class="mat-header-cell">Three</div>
</div>
<div class="mat-row">
<div class="mat-cell">AAA</div>
<div class="mat-cell">BBB</div>
<div class="mat-cell">CCC</div>
</div>
</div>