Question

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

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

此角材料表的升序为

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

Answer 1

您可以通过在获取数据后添加排序功能来实现这一目标。

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

Answer 2

您可以执行以下操作。

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

Answer 3

这不是最佳解决方案，但是我为此创建了一个简短而有效的解决方法。使用https://l46-vc-01.localtunnel.me的{{1}}谓词功能。

sort

Answer 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) {
        .
        .
        .
      });
    }

Answer 5

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

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

然后在您的组件代码中添加 sort 方法。请注意，您需要将每个列名插入到您希望排序的 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

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

5 个答案: