Как заказать коврик в алфавитном порядке, если опции имеют условные имена - PullRequest
Новая
       47

Как заказать коврик в алфавитном порядке, если опции имеют условные имена

0 голосов
/ 28 января 2020

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

 <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 Материал - элементы раскрывающегося списка в алфавитном порядке

Но это сортируется с использованием одной клавиши. Я не очень опытен в изготовлении нестандартных труб. Как это будет работать для моего случая?

Ответы [ 2 ]

1 голос
/ 28 января 2020

Лучше создать канал, который можно использовать для всего проекта, например: 

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) => для восходящего / нисходящего

Подробнее см. здесь

0 голосов
/ 28 января 2020

В идеале данные должны быть упорядочены в алфавитном порядке с бэкэнда.

Для него нет канала 'orderBy', потому что команда Angular считает, что он должен быть уже отсортирован, согласно документам на https://angular.io/guide/pipes

...