材料数据表 - NullInjectorError：没有 CdkColumnDef 的提供程序

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

providers:[CdkColumnDef]

添加到进口

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

Answer 2

据我所知，你不能像普通 HTML 表一样使用 Material Table。您需要一个数据源。

有两种方法可以获取材质表的样式。您可以使用 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>