角材料表字母数字排序行为答案

【问题标题】：Angular Material Table Alphanumeric Sorting Behaviour角材料表字母数字排序行为
【发布时间】：2019-07-27 17:41:22
【问题描述】：

我在 Angular Material Table 中遇到问题，虽然它在技术上是正确的，但我正在考虑是否有其他解决方法。

假设我确实有 5 个代码，F1、F2、F5、F9、F10。

Angular 材质表的升序排序将是，

F1
F10
F2
F5
F9

但我期待它是

F1
F2
F5
F9
F10

我的html代码在这里

<table mat-table [dataSource]="model.financingPurposeList" class="mat-elevation-z8" width="100%">

   <ng-container matColumnDef="code">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>
       <td mat-cell *matCellDef="let financingPurpose"> {{financingPurpose.code}} </td>
   </ng-container>

   <ng-container matColumnDef="description">
       <th mat-header-cell *matHeaderCellDef> Description </th>
       <td mat-cell *matCellDef="let financingPurpose"> {{financingPurpose.description}} </td>
   </ng-container>

   <tr mat-header-row *matHeaderRowDef="['code', 'description']; sticky: true"></tr>
   <tr mat-row *matRowDef="let row; columns: ['code', 'description'];" (click)="model.selectedFinancingPurpose.toggle(row)"></tr>

</table>

有没有办法做到这一点？

相关链接：

Natural Sorting

Sorting column containing both numbers and strings

【问题讨论】：

您应该在您的数据源（sortingDataAccessor）上实现自定义排序。对于自然顺序，您可能需要实现自定义算法。

标签： angular sorting angular-material

【解决方案1】：

你可以这样做。

var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
var myArray = ['F1',
'F10',
'F2',
'F5',
'F9'];
console.log(myArray.sort(collator.compare));

【讨论】：

哇。很好的答案。谢谢

【解决方案2】：

你可以通过在获取数据后添加排序功能来实现。

用法：

ngOnInit() {
this.dataSource.data.sort((a, b) => (a.code- b.code) );
  }

【讨论】：

【解决方案3】：

这不是最好的解决方案，但我为此创建了一个简短而有效的解决方法。使用array 的sort 谓词函数。

// Following the example to the question

financingPurposeList.sort(function(a, b){
   return a.code.length - b.code.length;
});

【讨论】：

【解决方案4】：

我最终覆盖了数据源中的排序函数，以对两个字符串进行本地比较。源代码在这里https://github.com/angular/components/blob/master/src/material/table/table-data-source.ts#L165，我更改的相关行如下

this.dataSource.sortData = (data: T[], sort: MatSort) => {
         .
         .
         .
        let comparatorResult = 0;
        if (valueA != null && valueB != null) {
          // ----- Added this IF below ----.
          if (valueAType === 'string' && valueBType === 'string') {
            comparatorResult = (valueA as string).localeCompare(valueB as string, 'en', { numeric: true })
          } else if (valueA > valueB) {
            comparatorResult = 1;
          } else if (valueA < valueB) {
            comparatorResult = -1;
          }
        } else if (valueA != null) {
        .
        .
        .
      });
    }

【讨论】：

【解决方案5】：

首先将指向您的排序方法的 matSortChange 事件侦听器放入您的 HTML 表格标记中。在这种情况下，它的 sortData($event) 但名称由您决定。

<table mat-table matSort aria-label="Elements"  [dataSource]="dataSource" (matSortChange)="sortData($event)">

然后在您的组件代码中添加排序方法。请注意，您需要将每个列名插入到您希望对其进行排序的 switch 语句中。

sortData(sort: Sort): number {
const data = this.inputData.slice();
if (!sort.active || sort.direction === '') {
  this.sortedData = data;
  return;
}

const sortedData = this.inputData.slice(); // input data is your data.
sortedData.sort((a, b) => {
  const isAsc = sort.direction === 'asc'; // detect sort direction
  switch (sort.active) {
    case 'name': return this.sortAlphanumeric(a.name, b.name, isAsc); // column name
    default: return 0;
  }
});

this.dataSource.data = sortedData; // assigns sorted data to your data in the table   }

下一步是添加自定义自然排序算法。

sortAlphanumeric(a: string, b: string, isAsc: boolean): number {
return isAsc ? a.localeCompare(b, 'en', { numeric: true }) : b.localeCompare(a, 'en', { numeric: true }); }

与基本排序算法类似的解决方案：https://material.angular.io/components/sort/overview

【讨论】：