MatTable не обновляется при обновлениях

Я пытаюсь обновить mat-table представление после выполнения операции обновления его данных. Однако представление таблицы обновляется правильно только при первом обновлении. Каждая последующая операция обновления задерживается на 1 действие, например:

  1. Обновить строку 1 -> ничего не происходит
  2. Обновить строку 2 -> строка 1 обновляется
  3. Обновить строку 3 -> строка 2 обновляется

и так далее...

Таблица загружается с помощью службы http.get для получения данных. Операция обновления вызывает службу http.post для сохранения данных, а затем вызывает метод refreshData(). Обе службы работают по назначению.

Я использую ChangeDetectorRefдля принудительного обнаружения изменений.

Компонент:

dataSource: MatTableDataSource<IRegion> = new MatTableDataSource();

@ViewChild(MatSort) set content(sort: MatSort) {
    this.dataSource.sort = sort;
};

constructor(private regionService: RegionService, private changeDetectorRefs: ChangeDetectorRef) {}

ngOnInit() {
    this.populateRegions();
}

refreshData(){
    this.populateRegions();
}

populateRegions(){
    this.regionService.getRegions().subscribe({
        next: regions => {
            this.dataSource.data = regions;
            this.changeDetectorRefs.detectChanges();
        }
    });
}

Что я здесь делаю не так?


angular angular-material mat-table
person Daniel André    schedule 17.12.2019    source источник
comment
Дойдете ли вы до this.dataSource.data = regions после первого обновления?   -  person Maihan Nijat    schedule 17.12.2019
comment
@MaihanNijat да. Я использовал журналы, чтобы все проверить (удалил их здесь, чтобы код был прост), и что он работает должным образом. Не обновляется только представление.   -  person Daniel André    schedule 17.12.2019
comment
и затем вызывает refreshData () - покажите, как он это делает   -  person Julius    schedule 17.12.2019
comment
Хорошо ... Я выяснил, в чем проблема. И службы сохранения, и службы получения - это HTTP-запросы к внутреннему серверу. Поскольку они вызываются почти одновременно (post - ›get), служба get считывает данные до того, как данные будут сохранены. Я добавил задержку между ними, и теперь все работает нормально.   -  person Daniel André    schedule 17.12.2019
comment
@ DanielAndré добавление задержки - не лучшая идея. Это может занять больше времени, чем ожидалось. Дождитесь одного звонка и после завершения звоните другому.   -  person Maihan Nijat    schedule 17.12.2019

Ответы (1)


arrow_upward
1
arrow_downward

Используйте метод RenderRows() по ссылке mat-table:

@ViewChild(MatTable, {static: false}) table : MatTable
this.table.renderRows()

Или воссоздайте объект источника данных:

populateRegions(){
    this.regionService.getRegions().subscribe({
        next: regions => {
            this.dataSource = new MatTableDataSource(regions);
            this.changeDetectorRefs.detectChanges();
        }
    });
}
person Maihan Nijat    schedule 17.12.2019
comment
Такое же поведение. Он работает в первый раз, но каждое последующее редактирование имеет задержку в 1 операцию. Также пробовал в разных браузерах. - person Daniel André; 17.12.2019