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

我试图以编程方式对MatTableDataSource进行排序，以便在特定的移动布局中查看数据时，可以通过使用按钮而不是通过表列标题对数据进行排序。然而，我很难做到这一点

我已经按照建议去做了，但是数据排序并没有被反映出来。使用与表格相同数据的移动布局设计：

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

---

编辑2：通过使用

*ngFor

将“matSort”添加到

mat卡中，以创建
mat表的移动布局版本，删除已修复的错误图像
更新

已在向材料团队报告了一个缺陷。目前看来这是不可能的。请使用手动方法或实现您自己的排序标题


尝试手动排序数据源的数据：

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;
        }
    });
}

sortDataSource（id:string，start:string）{
this.dataSource.sort.sort（{id:id，start:start}））；
this.dataSource.data.sort（（a:any，b:any）=>{
if（a.createdDateb.createdDate）{
返回1；
}否则{
返回0；
}
});
}

您可以使用函数的id和start参数轻松地使其更通用。
当您重新分配
数据源。使用
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>

ASC
描述
您在哪里定义此.dataSource
？实际上，您并没有对任何内容进行排序，而是在ngOnInit中设置排序id和方向。当使用mat表的列标题时，我能够对数据进行良好排序，但我尝试使用按钮对其进行排序，而不是使用MatTableDataSource的方法，但我找不到太多关于它的文档。mat sort指令连接到表，因此对数据进行排序，但手动进行排序是不同的。请按要求发布您在编辑中添加的数据源代码。已按照编辑所述修复错误消息，但排序仍然没有反映在数据中。不过，我不想手动对数据进行排序。我想要一种访问MatTableDataSource内置排序方法的方法，因为我已经在定义如何在
this.dataSource.sortingDataAccessor
方法中对数据进行排序，这样我就可以通过传递
id
和
start
道具来模拟使用按钮按下列标题的方式。也许这是不可能的？好吧，再加一个。表格上方的排序按钮打开一个mat菜单，然后在选择项目时使用排序功能。Aaaa好的，这就解释了它！是的，现在就需要手动操作了。谢谢
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;
        }
    });
}

@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;
  }

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