5

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

我已经按照这篇文章关于如何操作的建议进行操作，但没有反映数据排序。使用与表格相同的数据的移动布局设计：

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

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

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

通过点击垫子菜单中的按钮调用它，例如

<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>

对此的任何帮助将不胜感激！

链接到 StackBlitz。

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

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

编辑 2：删除错误图像，通过将“matSort”添加到mat-card用于*ngFor创建移动布局版​​本的mat-table.

4

3 回答 3

3

更新

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

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

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 参数轻松地使其更通用。

于 2019-03-04T12:29:45.497 回答
1

当您使用 重新分配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>
于 2019-11-25T14:04:30.077 回答
0

可能是材料表中最短的手动排序功能

这是我结合 JavaScript 的简短解决方案：

sortDataSource(idVal: string, startVal?: string): void {
    this.dataSource.data.sort(
        (a, b) => {
            return startVal === 'asc' ? a[idVal] - b[idVal] : (startVal === 'desc' ? b[idVal] - a[idVal] : a[idVal] - b[idVal]);
        }
    );
}
于 2021-10-01T14:08:00.997 回答