Нестандартная сортировочная труба для Angular 6

Я пытаюсь отсортировать свои данные в цикле ngFor, но мой пользовательский канал не работает по назначению, кто-нибудь может мне помочь...

  export class OrderbyLastMessagePipe implements PipeTransform {

  transform(array: Array<string>, args?: any): Array<string> {

    if (array !== undefined && array !== null && args !== '') {

      console.log('args', array);

        const direction = args === 'desc' ? 1 : -1;
        array.sort((a: any, b: any) => {

          console.log('args', a);

          if (a['lastUpdatedat'] < b['lastUpdatedat']) {
                return -1 * direction;
            } else if (a['lastUpdatedat'] > b['lastUpdatedat']) {
                return 1 * direction;
            } else {
                return 0;
            }
        });
    }
    return array;
}

Мой компонент ng контейнер это, я использую два фильтра, один для поиска, а другой для сортировки по определенному значению lastupdatedat, которое является меткой времени...

 <ng-container *ngFor="let User of uLists | orderbyLastMessage:'uLists':true">         

2 ответа

Две рекомендации:

  1. Если вы использовали угловой CLI для генерации вашей трубы, это name является orderByLastMessagePipe, Вы можете увидеть это в своем коде так:

    @Pipe({name: 'orderByLastMessagePipe'})

  2. Параметры, передаваемые вашей трубе, всегда будут вызывать сортировку по возрастанию. Для угловых труб несколько параметров разграничиваются :, orderbyLastMessage:'uLists':true" должно быть orderbyLastMessage:'desc' сортировать по убыванию, и orderbyLastMessage сортировать по возрастанию, или orderbyLastMessage:'asc',

Измените свой шаблон на:

<ng-container *ngFor="let User of uLists | searchUser:filterUser | orderbyLastMessagePipe:'desc'"> 

Посмотрите, исправит ли это вашу сортировку.

редактировать

Параметр массива для вашей трубы, очевидно, не является Array<string>, Если у вас есть определенный тип для объектов в вашем массиве, параметр должен быть тип Array<SomeObject>, Если нет, любой сделает Array<any>, или просто any,

Этот ответ НЕ является правильным способом сортировки из-за низкой производительности, как указано в предыдущих комментариях. Просто пытаюсь ответить на конкретный вопрос, который задают.

Очень похоже ответили здесь

Угловая сортировка массива труб под заказ

Поиск пользователя должен выполняться с использованием типа ввода text, keyup event и метода array.filter.

Удачи!

Другие вопросы по тегам