Sorting 如何进行默认的多重排序？

这是我当前的代码：

displayedColumns: string[] = ['id', 'dataYear', 'dataMonth', 'population', 'sources', 'created_at', 'updated_at', 'actions'];

@ViewChild(MatSort) sort: MatSort;

ngOnInit() {

   this.sort.sort(<MatSortable>({id: 'updated_at', start: 'desc'}));
   this.listData.sort = this.sort;
}

我只能对一列进行默认排序。 如果我想做三列数据年，数据月，更新的排序

以下内容是HTML组件：

<mat-table [dataSource]="listData" matSort>
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header class="hide"> Id. </mat-header-cell>
<mat-cell *matCellDef="let element" class="hide"> {{element.id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="dataYear">
<mat-header-cell *matHeaderCellDef mat-sort-header> Year </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.dataYear}} </mat-cell>
</ng-container>
<ng-container matColumnDef="dataMonth">
<mat-header-cell *matHeaderCellDef mat-sort-header> Month </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.dataMonth}} </mat-cell>
</ng-container>
<ng-container matColumnDef="population">
<mat-header-cell *matHeaderCellDef mat-sort-header> Population </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.population}} </mat-cell>
</ng-container>
<ng-container matColumnDef="sources">
<mat-header-cell *matHeaderCellDef mat-sort-header> Sources </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.sources}} </mat-cell>
</ng-container>
<ng-container matColumnDef="created_at">
<mat-header-cell *matHeaderCellDef mat-sort-header> Created Time </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.created_at}} </mat-cell>
</ng-container>
<ng-container matColumnDef="updated_at">
<mat-header-cell *matHeaderCellDef mat-sort-header> Updated Time </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.updated_at}} </mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let row">
<button mat-icon-button (click)="onEdit(row)"><mat-icon>launch</mat-icon></button>
<button mat-icon-button color="warn" (click)="onDelete(row.id)"><mat-icon>delete_outline</mat-icon></button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

---

我认为这还不受支持，请看这个Github问题

但是您可以自己对数据进行排序，而不是依赖于材料数据源来为您进行排序，而现在无论如何，它都不能进行多字段排序

这是我拼凑的一份速记

它根本不使用matSort，只是通过排序对象数组对数据源本身的数据进行排序：

然后是使用排序配置的函数：

public sort() {
  if (!this.multiSort) {
    return;
  }

  let sortedData: PeriodicElement[];
  this.multiSort.forEach(sort => {
    sortedData = this.dataSource.data
    .sort((a, b) => {
      if (sort.direction === 'asc') {
        return a[sort.id] > b[sort.id] ? 1 : -1;
      } else if (sort.direction === 'desc') {
        return a[sort.id] > b[sort.id] ? -1: 1;
      } else {
        return 0;
      }
    });
  });
  this.dataSource.data = sortedData;
}

---

这可能并不理想，但根据您的需求，类似的解决方案可能会帮助您解决此问题。

我认为这还不受支持，请参阅此Github问题

但是您可以自己对数据进行排序，而不是依赖于材料数据源来为您进行排序，而现在无论如何，它都不能进行多字段排序

这是我拼凑的一份速记

它根本不使用matSort，只是通过排序对象数组对数据源本身的数据进行排序：

然后是使用排序配置的函数：

public sort() {
  if (!this.multiSort) {
    return;
  }

  let sortedData: PeriodicElement[];
  this.multiSort.forEach(sort => {
    sortedData = this.dataSource.data
    .sort((a, b) => {
      if (sort.direction === 'asc') {
        return a[sort.id] > b[sort.id] ? 1 : -1;
      } else if (sort.direction === 'desc') {
        return a[sort.id] > b[sort.id] ? -1: 1;
      } else {
        return 0;
      }
    });
  });
  this.dataSource.data = sortedData;
}

---

这可能并不理想，但根据您的需求，类似的解决方案可能会让您解决此问题。

使用单一排序四次，然后它将得到我想要的结果

优先级：更新时间>数据年>人口>创建时间

this.sort.sort(<MatSortable>({id: 'created_at', start: 'desc'}));
this.sort.sort(<MatSortable>({id: 'population', start: 'desc'}));
this.sort.sort(<MatSortable>({id: 'dataYear', start: 'desc'}));
this.sort.sort(<MatSortable>({id: 'updated_at', start: 'desc'}));

---

使用单一的排序四次，然后它会出来我想要的

优先级：更新时间>数据年>人口>创建时间

this.sort.sort(<MatSortable>({id: 'created_at', start: 'desc'}));
this.sort.sort(<MatSortable>({id: 'population', start: 'desc'}));
this.sort.sort(<MatSortable>({id: 'dataYear', start: 'desc'}));
this.sort.sort(<MatSortable>({id: 'updated_at', start: 'desc'}));

---

间接的方法是使用sortingDataAccessor函数

在函数中，您可以简单地连接主排序列，然后将其正确排序

例如，如何按相同的日期排序，即：

this.dataSource.sortingDataAccessor = (item, property) => {
      switch (property) {
        case 'dueDate': return (item?.dueDate + item?.name);
        case 'name': return item?.name;
}

---

间接的方法是使用sortingDataAccessor函数

在函数中，您可以简单地连接主排序列，然后将其正确排序

例如，我想对到期日进行排序，然后对相同的日期按名称进行排序。我是如何做到这一点的：

this.dataSource.sortingDataAccessor = (item, property) => {
      switch (property) {
        case 'dueDate': return (item?.dueDate + item?.name);
        case 'name': return item?.name;
}

---

你也可以分享你的html代码吗？@SamarthSaxena首先感谢你的评论~我已经更新了组件。我相信你想对剩下的列进行排序，我想问题在于你的onInit方法，你只初始化了一列进行排序。DoonThing从Init上的ng中删除该区域，并尝试类似displayedColumns的操作：string[]=['position'，'name'，'weight'，'symbol']；数据源=新MatTableDataSourceELEMENT\u数据@VIEWCHILDMASTORT排序：MatSort；ngOnInit{this.dataSource.sort=this.sort；}有关详细信息，请您也分享您的html代码好吗？@SamarthSaxena首先感谢您的评论~我已经更新了组件。我相信您想对其余列进行排序，我想问题在于您的onInit方法，您只初始化了一列进行排序。DoonThing从Init上的ng中删除该区域，并尝试类似displayedColumns的操作：string[]=['position'，'name'，'weight'，'symbol']；数据源=新MatTableDataSourceELEMENT\u数据@VIEWCHILDMASTORT排序：MatSort；ngOnInit{this.dataSource.sort=this.sort；}了解更多信息-非常遗憾。。。所以唯一的解决办法是我必须调整Laravel后端。我花了整整一个下午的时间来找出答案：“太伤心了。。。所以唯一的解决办法是我必须调整Laravel后端。我花了整整一个下午的时间来找出答案