无法设置 MatTable 数据源

Question

我有点吃不消了。我有一个组件，它有我用来显示数据的 MatTable。我有一个新要求，需要根据定义的一些快捷方式触发 http 调用并更新数据源。

我正在使用 ngrx 进行状态管理，并且我的数据存储在存储中。在添加快捷方式之前，我获取了一次数据并应用了分页，它之前工作正常。现在，当我触发一个 http 调用来获取数据时，网格有时会显示非常奇怪的行为，但它不会显示数据，但是数据在那里并且我的分页器会相应地更新。

这是我的代码：

 this.store.select(selectSearchData).subscribe(data => {
  this.paginator && this.paginator.firstPage();
  this.selectedElement = null;
  this.dataSource.data = data; // Data is there in the 'data' variable but it doesn't update the datasource
  this.activePageDataChunk = this.dataSource.filteredData.slice(
    0,
    this.pageSize
  );
  this.paginator && (this.paginator.pageSize = this.pageSize);
  this.count = -1;

});

我的 ngOnInit 方法中有以下代码：

   ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.connect().subscribe(data => {
      this.activePageDataChunk = data;
      this.activePageDataChunk =  this.searchService.searchResultmapper(this.activePageDataChunk,this.language);
      this.store.dispatch(UPDATE_PAGINATIION_DIRECTORY({directories:this.activePageDataChunk}));
    });
  }

我已经记录了数据并且它在那里，但不知何故我的数据源没有更新。我在这里做错了什么？

Answer 1

尝试使用这种方式将数据加载到MatTable

dataSource : MatTableDataSource<any>; //replace any with your type if you know

得到 Api 的响应后

this.dataSource = new MatTableDataSource(data);
//replace data as per your response