代码之家 › 专栏 › 技术社区 › PrivateJoker

角度材质表不显示数据

angular-material angular

PrivateJoker · 技术社区 · 6 年前

我错过了什么?我验证了我的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"
    ]
  }
]

3 回复 | 直到 6 年前

Tomasz Kula 6 年前

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

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

David 6 年前

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

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

Pipo 6 年前

就我而言,我继承了 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