Question

我有一个带有可扩展行的mat-table，并且在更新数据源时，所有打开的行都会自动关闭，并且页面也会失去滚动位置。如何在不影响当前状态的情况下更新表数据？

示例代码： mat-table with expanded rows stackblitz

Answer 1

我只是在试验mat table api和DataSource接口，所以也许我错过了一些东西，但是您描述的一个选择是避免每次mat table内部调用connect方法时创建一个新的可观察对象。相反，只要有新数据可用，就返回BehaviorSubject并调用next。

根据您的stackblitz示例，只需通过返回BehaviorSubject并添加新方法来修改ExampleDataSource，以便在表有新数据可用时使用。

export class ExampleDataSource extends DataSource<any> {

  private _data$: BehaviorSubject<any[]> = new BehaviorSubject([]);
  data$ = this._data$.asObservable();

  update(data) {
    const rows = [];
    data.forEach(element => rows.push(element, { detailRow: true, element }));
    this._data$.next(rows);
  }
  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<Element[]> {
    return this.data$;
  }

  disconnect() { }
}

还有forked stackblitz，我以相反的顺序触发了数据更新以进行验证。

有没有一种方法可以更新mat-table数据源而不重新渲染表？

1 个答案: