angular - 在 MatPaginator 不工作的情况下，在 Mat Table 中异步排序 Mat Sort，在模板中异步分配数据源

Question

我正在尝试向这个已经工作的现有 MatTable 添加一个 matSort。我已尝试实现我在此处其他线程上找到的内容 mat-sort not working on mat-table ，因为它看起来像是在描述同一个问题，但无法让它发挥作用。我认为原因之一可能是我的数据源是在模板中异步计算的，而不是在我估计的 TS 文件中。为清楚起见，我之前更改了它检索数据源的方式，将其移至 TS 文件，但 UI 仍未更新。

这里是代码的简化版本:

模板:

 <table matSort mat-table [dataSource]="(searchMode === 'shift') ? shifts : (searchMode === 'booking') ? bookings">

 <ng-container matColumnDef="orgName">
          <th mat-header-cell *matHeaderCellDef  mat-sort-header> Organisation </th>
          <td mat-cell *matCellDef="let element"> {{element.orgName}} </td>
        </ng-container>

        <ng-container matColumnDef="workerName">
          <th mat-header-cell *matHeaderCellDef  mat-sort-header> Worker </th>
          <td mat-cell *matCellDef="let element"> {{element.workerName}} </td>
        </ng-container>

</table>
      <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100]" [pageSize]="20" [length]="total" (page)="onPageChange()" showFirstLastButtons></mat-paginator>

TS 文件:

import {MatTable, MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';

export class TsGenerationSearchTableComponent implements OnInit, OnChanges, AfterViewInit {

  dataSource = new MatTableDataSource<Shift>();
  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: false}) sort: MatSort;

  selectedWeekend: string;
  selectedWeekStart: string;


ngOnInit() {
    this.dataSource.paginator = this.paginator;
}

 ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }


  onPageChange() {
    const data: GetShiftTimesheetData = {
      action: (this.searchMode === 'shift') ? 'PageGetShiftsForTsAction' : (this.searchMode === 'booking') ? 'PageGetBookingsForTsAction',
      weekStartDate: this.selectedWeekStart,
      weekEndDate: this.selectedWeekend,
      paginator: {
        pageSize: this.paginator.pageSize,
        pageIndex: this.paginator.pageIndex
      }
    };
    this.search.emit(data);
  }

排序在 UI 中绝对不可见。我尝试在 ngOnChanges 中订阅以查看它是否至少被看到，如下所示:

ngOnChanges(changes: SimpleChanges): void {
if (this.dataSource && this.paginator && this.sort) {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    this.sort.sortChange.subscribe(val => {
      console.log(val);
    });
    }
  }

并且日志显示它至少对 sortChange 使用react:

{active: "workerName", direction: "asc"}

和

{active: "workerName", direction: "desc"}

但 UI 中没有任何内容。我尝试在订阅中执行 this.dataSource.sort = val; 但抛出错误 ERROR TypeError: You provided 'undefined' where a stream was expected.您可以提供 Observable、Promise、Array 或 Iterable。

欢迎任何帮助/提示。非常感谢你们。

Answer 1

您可以尝试以编程方式创建表格元素并仅在数据可用时呈现它。

1) 使用 mat-table 为表格创建一个单独的组件和模板。

2) 导入该组件并将 ComponentFactoryResolver 类注入(inject)您的 TsGenerationSearchTableComponent 类。

import { ComponentFactoryResolver } from '@angular/core';
import { MyCustomMatTableComponent } from 'your/path/to/component';


export class TsGenerationSearchTableComponent implements OnInit {
    constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
    .... 

3) 在传入表的模板中使用占位符 via 指令。此占位符将公开您在那里需要的 ViewContainerRef。 (创建然后在您的应用程序模块中声明 PlaceholderDirective。)

placeholder.directive.ts:

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appPlaceholder]'
 })
export class PlaceholderDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

tsGenerationSearchTableComponent.html:

<!-- Add this where ever you want your table to be rendered -->
<ng-template appPlaceholder></ng-template>

4) 在 tsGenerationSearchTableComponent.ts 中为占位符添加 ViewChild 选择器:

  @ViewChild(PlaceholderDirective) yourMatTableComponent: PlaceholderDirective; // By passing in 
  a class to ViewChild, it will find the first instance of said class.

5) 订阅 dataSource fetch... 并使用 ComponentFactoryResolver 仅在成功检索数据时呈现您的表格。

this.fetchData.subscribe((data) => {
   const customMatTableFactory = this.componentFactoryResolver.resolveComponentFactory(MyCustomMatTableComponent); 
   const viewContainerRef = this.matTablePlaceHolder.viewContainerRef;

   hostViewContainerRef.clear(); // This will clear anything that was previously rendered in the ViewContainer.
   const componentRef = viewContainerRef.createComponent(customMatTableFactory);
})