Angular 角度材质表不显示数据

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

验证数据：

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

示例数据：

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

---

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

更改

对此：

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

MatTableDataSource

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

导出类HomeComponent实现OnInit{
columnsToDisplay=['name'，'path']；
数据源：MatTableDataSource；
构造函数（私有myDataService:myDataService）{}
ngOnInit（）：void{
this.myDataService.getData（）
.subscribe（data=>this.dataSource=new MatTableDataSource（data））；
}
}

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

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

ngOnInit（）：void{
this.myDataService.getData（）
.订阅（x=>
{
this.myData=x；
this.dataSource.data=x；//在我的例子中，我继承了
MatTableDataSource
创建
MyDataSource
而不在
this.data=someArray

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 

未显示的数据

类MyDataSource
导出类MyDataSource扩展MatTableDataSource{
私有实体主体=新行为主体（[]）；
loadDataSourceData（someArray:T[]{
this.data=someArray//无论是否异步来自API
this.entitiesSubject.next（this.data作为T[]）//否则不显示数据
}
public connect（）：行为主体{
返回此.entitiesSubject
}
}//末级
您在console中是否遇到任何错误。allI没有出现任何错误。我尝试了这个方法，但对我来说仍然不起作用。在我的例子中，我猜网格行是在数据实际填充行之前加载的。在我的例子中，我犯了第二个错误。按照您的回答，它非常有效。
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));
  }
}

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

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

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