角度材料表不显示数据 [英] Angular Material Table not displaying data

问题描述

我错过了什么?我确认我的 API 正在返回数据，但是我无法将数据显示在我的表中.

验证数据:

{{ myData|json }}</pre>
HTML
<mat-table [dataSource]='dataSource'><ng-container matColumnDef="name"><mat-h​​eader-cell *matHeaderCellDef>名称</mat-h​​eader-cell><mat-cell *matCellDef="let df">{{df.name}} </mat-cell></ng-容器><ng-container matColumnDef="path"><mat-h​​eader-cell *matHeaderCellDef>路径</mat-h​​eader-cell><mat-cell *matCellDef="let df">{{df.path}} </mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="columnsToDisplay"></mat-h​​eader-row><mat-row *matRowDef="let df; columns: columnsToDisplay"></mat-row></mat-table>
打字稿:
导出类 HomeComponent 实现 OnInit {columnsToDisplay = ['name', 'path'];myData: IMyData[];dataSource = new MatTableDataSource(this.myData);构造函数(私有 myDataService:MyDataService){console.log("在构造函数中");}ngOnInit(): 无效 {this.myDataService.getData().subscribe(x => this.myData = x,错误 =>console.log("错误(GetData)::" + 错误));}}
我想知道它是否与我的界面有关:
界面
导出接口 IMyData {id:字符串；路径:字符串；日期:日期；位置:地理位置；名称:字符串；小玩意:字符串[]；}
示例数据:
<预><代码>[{"id": "9653a6b5-46d2-4941-8064-128c970c60b3","path": "测试路径","日期": "2018-04-04T08:12:27.8366667","location": "{\"type\":\"Point\",\"坐标\":[102.0,0.5]}","name": "测试名称",小发明":[AAAA"，"BBBB",中交"]}]

解决方案

第一个错误是数据绑定不正确，用单引号代替双引号:

更改

为此:

第二个错误是不正确的数据源初始化.您应该在从服务中获取数据后创建 MatTableDataSource.

导出类 HomeComponent 实现 OnInit {columnsToDisplay = ['name', 'path'];数据源:MatTableDataSource;构造函数(私有 myDataService:MyDataService){}ngOnInit(): 无效 {this.myDataService.getData().subscribe(data => this.dataSource = new MatTableDataSource(data));}}

What am I missing? I verified that my API is returning data back however I can't get the data to display in my table.

Verified data:

<pre>{{ myData| json }}</pre>

Html

<div *ngIf="dataSource">
  <mat-table [dataSource]='dataSource'>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let df"> {{df.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="path">
      <mat-header-cell *matHeaderCellDef> Path </mat-header-cell>
      <mat-cell *matCellDef="let df"> {{df.path}} </mat-cell>
    </ng-container>

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

  </mat-table>
</div>

Typescript:

export class HomeComponent implements OnInit {
  columnsToDisplay = ['name', 'path'];
  myData: IMyData[];
  dataSource = new MatTableDataSource<IMyData>(this.myData);

  constructor(private myDataService: MyDataService) { 
    console.log("IN CONSTRUCTOR");
  }

  ngOnInit(): void {
    this.myDataService.getData()
    .subscribe(x => this.myData = x,
      error => console.log("Error (GetData) :: " + error)
    ); } 
}

EDIT: I wonder if it has to do with my interface:

Interface

export interface IMyData {
  id: string;
  path: string;
  date: Date;
  location: Geolocation;
  name: string;
  gizmos: string[];
}

Example Data:

[
  {
    "id": "9653a6b5-46d2-4941-8064-128c970c60b3",
    "path": "TestPath",
    "date": "2018-04-04T08:12:27.8366667",
    "location": "{\"type\":\"Point\",\"coordinates\":[102.0,0.5]}",
    "name": "TestName",
    "gizmos": [
      "AAAA",
      "BBBB",
      "CCCC"
    ]
  }
]

解决方案

First mistake is the incorrect data binding with single quotes instead of double quotes:

Change <mat-table [dataSource]='dataSource'>

To this: <mat-table [dataSource]="dataSource">

Second mistake is incorrect data source initialization. You should create the MatTableDataSource after fetching the data from the service.

export class HomeComponent implements OnInit {
  columnsToDisplay = ['name', 'path'];
  dataSource: MatTableDataSource<IMyData>;

  constructor(private myDataService: MyDataService) {   }

  ngOnInit(): void {
    this.myDataService.getData()
     .subscribe(data => this.dataSource = new MatTableDataSource(data));
  }
}

这篇关于角度材料表不显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！