Question

我正在尝试以编程方式对MatTableDataSource进行排序，以便在查看特定移动布局中的数据时，可以通过使用按钮而不是通过表列标题来对数据进行排序。但是，我在这样做时遇到了麻烦。

我已经按照this post's的建议进行操作，但是数据排序没有得到反映。使用与表相同的数据的移动布局设计：

<mat-card matSort *ngFor="let item of dataSource.filteredData">

我用来尝试对数据进行排序的函数是：

sortDataSource(id: string, start: string){
  this.dataSource.sort.sort(<MatSortable>({id: id, start: start}));
}

例如通过点击Mat菜单中的按钮来调用。

<mat-menu #sortMenu="matMenu" yPosition="below" [overlapTrigger]="false">
            <button mat-menu-item (click)="sortDataSource('createdDate', 'asc')"><span>Creation Date</span><mat-icon>arrow_upward</mat-icon></button>

对此将提供任何帮助！

Link to StackBlitz.

编辑：添加将数据分配给来自Observable数组的表的dataSource的位置：

this.data$.subscribe(data => {
      this.dataSource.data = data;
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
}

编辑2：通过使用mat-card向*ngFor添加“ matSort”来创建mat-table的移动布局版本，修复了错误图像。

Answer 1

更新

已经在Github.com向材料小组报告了一个错误。目前看来这是不可能的。请使用手动方法或实现自己的排序标题。

尝试手动对数据源的数据进行排序：

sortDataSource(id: string, start: string) {
    this.dataSource.sort.sort(<MatSortable>({ id: id, start: start }));
    this.dataSource.data.sort((a: any, b: any) => {
        if (a.createdDate < b.createdDate) {
            return -1;
        } else if (a.createdDate > b.createdDate) {
            return 1;
        } else {
            return 0;
        }
    });
}

您可以使用函数的id和start参数轻松地使其更通用。

Answer 2

用dataSource.sort重新分配matSort时，模板会收到有关更改的通知并表示更改。

component.ts

@ViewChild(MatSort, { static: false }) matSort: MatSort;

  orderData(id: string, start?: 'asc' | 'desc') {
    const matSort = this.dataSource.sort;
    const toState = 'active';
    const disableClear = false;

    matSort.sort({ id: null, start, disableClear });
    matSort.sort({ id, start, disableClear });

    this.dataSource.sort = this.matSort;
  }

component.html

<button mat-raised-button
   (click)="orderData('nameOfColumn', 'asc')">ASC</button>
<button mat-raised-button
   (click)="orderData('nameOfColumn', 'desc')">DESC</button>

如何以编程方式对MatTableDataSource进行排序？

2 个答案: