带有静态数据的材料设计数据表布局答案

【问题标题】：Material design data table layout with static data带有静态数据的材料设计数据表布局
【发布时间】：2018-12-13 17:55:43
【问题描述】：

如何在没有数据源（静态数据）的情况下使用材料设计数据表布局？我在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)

【问题讨论】：

documentation page, which you have linked 上的第一个示例准确地展示了如何使用简单的数据数组来执行此操作。
@AndreasMayer 该示例适用于具有数据源的材料表。问题是关于如何在没有数据源的情况下使用材料表。
@Manoj De Mel：如果您查看该示例的 TypeScript 源代码，您会发现它使用普通数组而不是 MatTableDataSource。
@AndreasMayer 据我了解，问题是关于“如何在没有数据源的情况下使用材料表”他/她想像使用普通表一样使用它。据我所知，无论它是 MatDataSource 还是其他方式，您都不能在没有数据源的情况下使用 Material Table。

标签： angular angular-material material-design mat-tab

【解决方案1】：

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

providers:[CdkColumnDef]

添加到导入

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

【讨论】：

很好用，但现在我收到此错误：缺少页眉、页脚和行的定义；无法确定应该呈现哪些列
stackoverflow.com/questions/49026943/… 这应该会有所帮助
@VedhaPeri 如果有人想用静态数据制作表格，怎么做？，如果我正在检查你的链接，它是关于数据源的

【解决方案2】：

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

有两种方法可以获取 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>

【讨论】：