matSort 不适用于 cdk-virtual-scroll-viewport

Question

我在 Angular 应用程序中使用 cdk-virtual-scroll-viewport 滚动时使用下面的代码在 table 中呈现数据。 Material 排序功能也已使用 matSort 实现。请参考以下代码。

table.component.html:

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

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

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

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

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <ng-template let-row matRowDef cdkVirtualFor [matRowDefColumns]="displayedColumns" [cdkVirtualForOf]="rows">
      <tr mat-row></tr>
    </ng-template>
  </table>
</cdk-virtual-scroll-viewport>

table.component.ts:

import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { VIRTUAL_SCROLL_STRATEGY } from "@angular/cdk/scrolling";
import { Observable, of, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
import {MatSort, MatTableDataSource} from '@angular/material';
import { TableVirtualScrollStrategy } from './table-vs-strategy.service';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  {position: 11, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 12, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 13, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 14, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 15, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 16, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 17, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 18, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 19, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 20, name: 'Neon', weight: 20.1797, symbol: 'Ne'}
];
@Component({
  selector: 'app-table',
  templateUrl: 'table.component.html',
  providers: [{
    provide: VIRTUAL_SCROLL_STRATEGY,
    useClass: TableVirtualScrollStrategy,
  }],
})
export class TableComponent implements OnInit {

  // Manually set the amount of buffer and the height of the table elements
  static BUFFER_SIZE = 3;
  rowHeight = 48;
  headerHeight = 56;

  rows: Observable<Array<any>> = of(ELEMENT_DATA);

  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];

  dataSource = new MatTableDataSource(ELEMENT_DATA);

  gridHeight = 400;
@ViewChild(MatSort) sort: MatSort;

  constructor(@Inject(VIRTUAL_SCROLL_STRATEGY) private readonly scrollStrategy: TableVirtualScrollStrategy) {}

  public ngOnInit() {
    const range = Math.ceil(this.gridHeight / this.rowHeight) + TableComponent.BUFFER_SIZE;
    this.scrollStrategy.setScrollHeight(this.rowHeight, this.headerHeight);

    this.dataSource = combineLatest([this.rows, this.scrollStrategy.scrolledIndexChange]).pipe(
      map((value: any) => {

        // Determine the start and end rendered range
        const start = Math.max(0, value[1] - TableComponent.BUFFER_SIZE);
        const end = Math.min(value[0].length, value[1] + range);

        // Update the datasource for the rendered range of data
        return value[0].slice(start, end);
      })

    );
    this.dataSource.sort = this.sort;
  }
}

Material 排序无法使用虚拟滚动。如何解决问题？

Answer 1

尝试添加一个新的 ViewChild setter，它在存在时设置排序。

@ViewChild(MatSort)set matSortSetter(value: MatSort) {
  if(this.dataSource && value) {
    this.dataSource.sort = value;
  }
}

Answer 2

实际上你有两个选择：

像 Angular Material 文档 the first example 中那样处理 (matSortChange) 事件
由于 MatSort 指令已经公开了可观察对象来处理更改，您可以像 the second example 中那样访问 MatSort 实例并在数据源中处理来自 MatSort 的事件：

component.ts

import { MatSort } from '@angular/material';

@ViewChild(MatSort, {static: true}) sort: MatSort;

如果您要使用 MatTableDataSource（再次像文档中的第二个示例一样），那么您应该只在此处传递该实例：

dataSource = new MatTableDataSource(ELEMENT_DATA);

@ViewChild(MatSort, {static: true}) sort: MatSort;

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

然后 MatTableDataSource 将负责 all the magic under the hood。

但是由于在您的情况下您使用 Observable，因此您需要自己处理排序更改，例如：

public ngOnInit() {
  ...    
  const sortChange = merge(this.sort.sortChange, this.sort.initialized);

  this.dataSource = combineLatest([this.rows, this.scrollStrategy.scrolledIndexChange, sortChange]).pipe(
    map(([rows, index, sort]: [any[], number, Sort|void]) => {

      if (sort) {
        rows = this.sortData(rows.slice(), sort);
      }

      // Determine the start and end rendered range
      const start = Math.max(0, index - AppComponent.BUFFER_SIZE);
      const end = Math.min(rows.length, index + range);

      // Update the datasource for the rendered range of data
      return rows.slice(start, end);
    })
  );

}

  /**
 * Your implementation here
 */
sortData(data: any[], sort: Sort) {
  console.log(sort)
  return data.sort((a, b) => {
    return sort.direction === 'asc' ? a[sort.active] - b[sort.active] : b[sort.active] - a[sort.active]
  });
}

Stackblitz Example

为了保持一致，您可以创建自己的自定义数据源，甚至可以重复使用已经处理所有情况的 MatTableDataSource。

例如，这里有一个关于如何重用 MatTableDataSource:

的想法

this.subscription = combineLatest([this.rows, this.scrollStrategy.scrolledIndexChange]).pipe(
  tap(([rows, index]: [any[], number]) => {
    // Determine the start and end rendered range
    const start = Math.max(0, index - AppComponent.BUFFER_SIZE);
    const end = Math.min(rows.length, index + range);

    // Update the datasource for the rendered range of data
    const data = rows.slice(start, end);

    this.dataSource = new MatTableDataSource(data);
    this.dataSource.sort = this.sort;
  })
).subscribe();

Stackblitz Example

matSort 不适用于 cdk-virtual-scroll-viewport

matSort is not working with cdk-virtual-scroll-viewport

angular-material

angular

angular-cdk