角材料表字母数字排序行为 [英] Angular Material Table Alphanumeric Sorting Behaviour

问题描述

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

I'm having a problem in Angular Material Table, although it is technically correct, but I'm thinking if there's another way around for this.

假设我确实有5个代码，分别是F1，F2，F5，F9，F10.

Let say that I do have 5 codes, F1, F2, F5, F9, F10.

此角材料表的升序为

F1
F10
F2
F5
F9

但是我希望它是

F1
F2
F5
F9
F10

我的html代码在这里

My html code is here

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

有没有办法做到这一点?

Is there a possible way to do this?

相关链接:

自然排序

包含数字和字符串的排序列

推荐答案

这不是最佳解决方案，但是我为此创建了一个简短而有效的解决方法.使用array的sort谓词功能.

This isn't the best solution for this, but I created a short and sweet workaround for this. Using the sort predicate function of the array.

// Following the example to the question

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

这篇关于角材料表字母数字排序行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！