Правильный метод обновления MatTableDataSource в Angular 2 версии 6

Question

У меня есть листинг, в котором используется компонент таблицы матов, который подается MatTableDataSource.

в component.html

<table mat-table [dataSource]="dataSource" matSort>

в component.ts

dataSource = new MatTableDataSource();

когда я щелкаю, чтобы удалить элемент, при обратном вызове с сервера я обновляю список, чтобы отразить новый набор результатов, заново создавая MatTableDataSource (this.resources), и передаю новый набор результатов следующим образом. Это работает ...

this.PHService.getResources().subscribe(resources => {
  this.resources = resources;
  this.dataSource = new MatTableDataSource(this.resources);
  this.dataSource.sort = this.sort;
});

Однако, хотя это работает, я чувствую, что это неправильно.

Я прочитал несколько статей, в которых говорится, что я должен расширить источник данных? и вызвать метод renderRows ()? Я попробовал это, и я не могу заставить его работать в моем сценарии.

Я знаю, что это отсутствие понимания от моего имени.

Любая помощь / совет будет принята с благодарностью.

Заранее спасибо.

Answer 1

Я нашел лучший метод, который избавляет от необходимости внедрять службу ChangeDetectorRefs с помощью декоратора свойств @ViewChild.

Ниже приведен пример кода:

@ViewChild(MatTable) table: MatTable<any>;

, затем просто вызовите метод renderRows () для этого декоратора свойств, пример ниже:

  refresh(): void{
    this.service.method().subscribe(resources => {
      this.dataSource.data = resources; 
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    });
    this.table.renderRows();
  }

Это лучшее решение, которое я придумала, которое мне пока подходит.

Использование углового материала 6.4.7.

Надеюсь, это поможет.

Answer 2

Создайте новый объект MatTableDataSource один раз в компоненте init, затем добавьте массив, который поступает в dataSource.data

dataSource.data - это массив данных, который должен быть представлен таблицей, где каждый объект представляет одну строку, поэтомуВы не создаете новый экземпляр объекта при каждом изменении.

Можно использовать ChangeDetectorRef.Он ищет изменения в данном компоненте.

 constructor(private changeDetectorRefs: ChangeDetectorRef) {}

 refresh(){
  this.PHService.getResources().subscribe(resources => {

     this.dataSource.data = resources;
     this.dataSource.sort = this.sort;
  });
    this.changeDetectorRefs.detectChanges();
 }