Mat-table 变化可观察

Question

假设我在 html

中有 mat-table

 <div>
     <table mat-table [dataSource]="mydataDataSource" #myDataSortReference="matSort" matSort multiTemplateDataRows matSortDisableClear>
     <somerows mat-sort-header> </tr></th>
</table>

并在 .ts 文件中

  @ViewChildren('mydataSortReference', { read: MatSort }) myDataSortReference: QueryList<MatSort>;

和

  ngAfterViewInit(): void {
    this.myDataSortReference.changes.pipe(takeUntil(this.destroyed$)).subscribe(() => {
    this.sortMyDataMySpecialFunction();
  });
}

为什么更改是在页面刷新后发出的，而不是在第一次加载页面时发出的？是什么触发了这个组件的变化？

Answer 1

你需要给“mydataDataSource”一个更新的值，像这样说：

  sortMyDataMySpecialFunction(): void {
     mydataDataSource = UPDATED_TABLE_DATA;
  });

假设 sortMyDataMySpecialFunction() 在排序之前进行数据检索，否则一旦您获得数据（来自 server/etc。）分配它，最好在“ngAfterViewInit”函数中分配

编辑： sortData 函数在某些情况下被调用：

Called after changes are made to the filtered data or when sort changes are emitted from MatSort.

根据 Angular docs

Mat-table 变化可观察

Mat-table changes observable

angular-material

angular

mat-table