Невозможно установить источник данных MatTable - PullRequest
Новая
       17

Невозможно установить источник данных MatTable

0 голосов
/ 13 января 2020

Я немного рассол. У меня есть компонент, который имеет MatTable, который я использую, чтобы показать данные. У меня есть новое требование, которое требует инициировать http-вызов на основе определенного ярлыка и обновить источник данных.

Я использую ngrx для управления состоянием, и мои данные хранятся в хранилище. Перед добавлением ярлыков я выбрал данные один раз и применил разбиение на страницы, и раньше он работал нормально. Теперь, когда я запускаю http-вызов для извлечения, сетка данных показывает очень странное поведение, иногда оно не показывает данные, однако данные там есть, и мой paginator соответствующим образом обновляется.

Вот мой код: 

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

Я зарегистрировал данные, и они есть, но почему-то мой источник данных не обновляется. Что я тут не так делаю?

1 Ответ

0 голосов
/ 13 января 2020

Попробуйте загрузить данные в MatTable, используя этот способ 

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

После получения ответа от Api 

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