Question

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

验证数据：

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

打字稿：

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)
    ); } 
}

编辑：我想知道它是否与我的界面有关：

接口

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

示例数据：

[
  {
    "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"
    ]
  }
]

Answer 1

第一个错误是使用单引号而不是双引号的错误数据绑定：

更改<mat-table [dataSource]='dataSource'>

对此：<mat-table [dataSource]="dataSource">

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

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));
  }
}

Answer 2

您需要更新数据源，而不仅仅是包含数据的变量

ngOnInit(): void {
    this.myDataService.getData()
    .subscribe(x => 
      {
        this.myData = x;
        this.dataSource.data = x; //<=== update the datasource's data
      },
      error => console.log("Error (GetData) :: " + error)
    ); 
    }

并设置正确的绑定

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

Answer 3

在我的情况下，我从MatTableDataSource继承来创建MyDataSource。在this.data = someArray

之后不打

this.entitiesSubject.next(this.data as T[])

未显示

的数据

MyDataSource类

export class MyDataSource<T extends WhateverYouWant> extends MatTableDataSource<T> {

    private entitiesSubject = new BehaviorSubject<T[]>([]);


    loadDataSourceData(someArray: T[]){
        this.data = someArray //whenever it comes from an API asyncronously or not
        this.entitiesSubject.next(this.data as T[])// Otherwise data not displayed
    }

    public connect(): BehaviorSubject<T[]> {
        return this.entitiesSubject
    }

}//end Class

角度材料表不显示数据

3 个答案:

MyDataSource类