Нестандартная сортировочная труба для 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 ответа
Две рекомендации:
Если вы использовали угловой CLI для генерации вашей трубы, это
name
являетсяorderByLastMessagePipe
, Вы можете увидеть это в своем коде так:@Pipe({name: 'orderByLastMessagePipe'})
Параметры, передаваемые вашей трубе, всегда будут вызывать сортировку по возрастанию. Для угловых труб несколько параметров разграничиваются
:
,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.
Удачи!