CODEWITHSUNDEEP
angulartypescriptmat-table
Farrukh Ahmed
Farrukh Ahmed

Reputation: 493

Unable to set MatTable datasource

I am in a bit of a pickle. I have component which have MatTable which I am using to show data. I have a new requirement which requires to trigger a http call based on some short cut defined and update the data source.

I am using ngrx for state-management and my data is stored in a store. Before adding the shortcuts I fetched the data once and apply pagination and it was working fine before. Now, when I trigger a http call to fetch the data grid shows very weird behavior sometimes it doesn't show the data however data is there and my paginator is updated accordingly.

Here is my code :

 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;

});

I have the following code in my ngOnInit method :

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

I have logged the data and it is there but somehow my datasource is not updating. What am I doing wrong here?

Upvotes: 0

Views: 57

Answers (1)

Mridul
Mridul

Reputation: 1366

Try to load data into MatTable using this way

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

After you get reponse from Api

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

Upvotes: 1

Related Questions