如何在更新数据源时保留 mat-table 行状态？ [关闭]答案

【问题标题】：How to preserve mat-table row state while updating datasource? [closed]如何在更新数据源时保留 mat-table 行状态？ [关闭]
【发布时间】：2020-11-15 21:06:07
【问题描述】：

我有一个带有可扩展行的垫子。更新数据源时，所有打开的行都自动关闭，页面失去滚动位置。

如何在保持 mat-table 组件重新初始化和丢失状态的同时更新表格数据？

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

【问题讨论】：

标签： angular typescript angular-material mat-table

【解决方案1】：

我只是在试验 mat table api 和 DataSource 接口，所以也许我遗漏了一些东西，但你描述的一个选项是避免每次 mat table 在内部调用 connect 方法时创建一个新的 observable。相反，只要有新数据可用，就返回 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，我在超时验证时触发了反向顺序的数据更新。

【讨论】：