无法显示角度材料表组件答案

【问题标题】：Can't get angular material table component to display无法显示角度材料表组件
【发布时间】：2018-06-01 19:43:12
【问题描述】：

一直在努力学习角度材质表组件教程here

除了必须使用 mat-table 标记而不是带有 mat-table 指令的 table 标记（似乎是 common issue）之外，我几乎完全可以按照教程进行操作。

可以在此处找到重现问题的 repo：

git clone https://github.com/Atticus29/stackoverflowTable.git
cd stackoverflowTable/
npm install
ng serve

在浏览器中导航至http://localhost:4200/。

有没有人知道为什么表格没有出现？控制台中没有错误。

我正在使用几个依赖项的较旧的稳定版本，因为有一些 evidence that the most recent versions might be the problem。

package.json 的相关摘录：

  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },

2018 年 6 月 3 日更新：我在同一个 repo 的解决方案分支中有工作示例。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

在您的代码中，您在 TableBasicExample 中声明了数据源。我不知道你为什么这样做，而是你必须像这样声明数据源：

export class AppComponent {
  displayedColumns = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

同样在html中，不需要使用tr,td之类的table标签。

  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No.</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>>
  </ng-container>

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

【讨论】：