如何在选项有条件名称时按字母顺序订购垫子 - select

Question

我有这个垫子-select，我想按字母顺序排序。

 <mat-select [(ngModel)]="item" name="item" (selectionChange)="changeIdentificationOptions($event)">
    <mat-option *ngFor="let item of itemss" [value]="item">
              {{ item.name ? item.name: item.identity}}
    </mat-option>
</mat-select>

显示的选项名称是有条件的。每个项目都有一个可选名称。如果它确实有名称，那么将使用它，否则将使用身份名称。

我在 SO 上看到建议制作一个自定义 orderBy 管道，类似于这个答案 Angular Material - dropdown order items alphabetically

但是使用单个键进行排序。我在制作定制管道方面不是很有经验。这对我的情况有何影响？

Answer 1

理想情况下，数据应从后端按字母顺序排列。

没有 'orderBy' 管道，因为 Angular 团队认为它应该已经排序，根据 https://angular.io/guide/pipes

上的文档

Answer 2

最好创建一个可用于整个项目的管道，如下所示：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({  name: 'orderBy' })
export class OrderrByPipe implements PipeTransform {

    transform(records: Array<any>, args?: any): any {
        return records.sort(function(a, b){
            if(a[args.property] < b[args.property]){
                return -1 * args.direction;
            }
            else if( a[args.property] > b[args.property]){
                return 1 * args.direction;
            }
            else{
                return 0;
            }
        });
    };
}

然后你可以像这样使用它：

<mat-option *ngFor="let item of itemss | orderBy: {property: column, direction: direction}"" [value]="item">
   {{ item.name ? item.name: item.identity}}
</mat-option>

注意：列 => 任何属性，方向（1 或 -1）=> ascending/descending

For more detail see this

如何在选项有条件名称时按字母顺序订购垫子 - select

How to order mat-select alphabetically when options have conditional names

typescript

angular-pipe

angular