Угловая таблица материалов Алфавитно-цифровая сортировка - PullRequest
3 голосов
/ 06 марта 2019

У меня проблема с таблицей угловых материалов, хотя это технически правильно, но я думаю, есть ли другой способ для этого.

Допустим, у меня есть 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>

Есть ли способ сделать это?

Ссылка по теме:

Естественная сортировка

Столбец сортировки, содержащий как числа, так и строки

Ответы [ 3 ]

1 голос
/ 06 марта 2019

Этого можно добиться, добавив функцию сортировки после получения данных.

ngOnInit() {
this.dataSource.data.sort((a, b) => (a.code- b.code) );
  }
0 голосов
/ 07 марта 2019

Это не лучшее решение для этого, но я создал короткий и приятный обходной путь для этого. Использование функции предиката sort для array.

// Following the example to the question

financingPurposeList.sort(function(a, b){
   return a.code.length - b.code.length;
});
0 голосов
/ 06 марта 2019

Вы можете сделать что-то вроде этого.

var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
var myArray = ['F1',
'F10',
'F2',
'F5',
'F9'];
console.log(myArray.sort(collator.compare));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...