Как отсортировать данные (в порядке возрастания) (из базы данных) в раскрывающемся списке с автозаполнением в angular с помощью настраиваемой трубы

app.component.html

‹Input type = text placeholder = data aria-label = Number matInput [formControl] = organisationControl [matAutocomplete] = auto› ‹mat-autocomplete # auto = matAutocomplete [displayWith] = displayFn (optionSelected) = 'onOrgChange ($ event.option. value) '›‹ mat-option * ngFor = let опция filterOptions | асинхронный | sort: 'name' [значение] = option ›{{option.name}}

app.component.ts

1. import { SortPipe } from "../../../pipes/sort.pipe";
2. private sortPipe: SortPipe,

app.module.ts

1. import { SortPipe } from '../../pipes/sort.pipe';
2.@NgModule({
  declarations: [
        SortPipe
  ], 
   providers: [SortPipe]

Пользовательская труба

Общий - ›pipe -› sort.pipe.ts

import { Injectable, Pipe, PipeTransform } from '@angular/core';
export type SortOrder = 'asc' | 'desc';

@Injectable()
@Pipe({
  name: 'sort',
})
export class SortPipe implements PipeTransform {
  transform(value: any, sortOrder: SortOrder | string = 'asc', sortKey?: string): any {
    sortOrder = sortOrder && (sortOrder.toLowerCase() as any);

    if (!value || (sortOrder !== 'asc' && sortOrder !== 'desc')) return value;

    let numberArray = [];
    let stringArray = [];

    if (!sortKey) {
      numberArray = value.filter(item => typeof item === 'number').sort();
      stringArray = value.filter(item => typeof item === 'string').sort();
    } else {
      numberArray = value.filter(item => typeof item[sortKey] === 'number').sort((a, b) => a[sortKey] - b[sortKey]);
      stringArray = value
        .filter(item => typeof item[sortKey] === 'string')
        .sort((a, b) => {
          if (a[sortKey] < b[sortKey]) return -1;
          else if (a[sortKey] > b[sortKey]) return 1;
          else return 0;
        });
    }
    const sorted = numberArray.concat(stringArray);
    return sortOrder === 'asc' ? sorted : sorted.reverse();
  }
}

Вопрос: Не отображается в порядке возрастания. я что-то пропустил?


person Priya    schedule 16.04.2021    source источник


Ответы (1)


Укажите правильные аргументы для вашего sort канала, имеющего направление, и имя поля, к которому должна применяться сортировка в app.component.html, как указано ниже:

<mat-option *ngFor="let option of filteredOptions| async | sort: 'asc':'name'" [value]="option"> {{option.name}}

См. Пример stackblitz

person wahab memon    schedule 17.04.2021