Question

我一直在尝试遵循角度素材表组件教程here

我几乎可以完全按照教程，除了必须使用mat-table标签而不是mat-table指令的table标签，这似乎是{{3} }。

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

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

导航至浏览器中的common issue。

有没有人能够了解桌子没有出现的原因？控制台中没有错误。

我使用了几个依赖项的较旧稳定版本，因为有一些http://localhost:4200/。

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日更新：我在同一个回购的解决方案分支中有工作示例。

Answer 1

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

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

同样在html中，不需要使用像tr，td这样的表标签。

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

无法显示角度材质表组件

1 个答案: