В Angular2 У меня есть ngFor и вы хотите заказать 1 поле

Question

В Angular2 У меня есть ngFor и вы хотите заказать 1 поле, но без создания собственной трубы.

Есть ли какие-либо встроенные устройства, которые я мог бы использовать?

Это мой код:

<tr *ngFor="let item of listOfMessages" [ngClass]="{unread: item.hasUnreadMessages}"> 

Я хочу заказать по item.hasUnreadMessages.

Но я хочу простейший способ сделать это.

Я использую HTML5 с angular2 и машинописи

Моя попытка:

this.listOfMessages = this.listOfMessages.sort((item1:any, item2:any): boolean => this.compareByBool(item1, item2, "hasUnreadMessages")); 


    compareByBool = (item1: any, item2: any, fieldName: any): any =>{ 
     return (item1[fieldName] === item2[fieldName] ? 0 : (item1[fieldName] ? -1 : 1)); 
    } 

Если это так: hasUnreadMessages то элемент должен быть в верхней части массива

Answer 1

Вы можете реализовать свою собственную сортировку, а затем сделать

this.sortedItem = this.items.sort((item1, item2): number => compareByNumber(item1, item2, fieldName)); 

или

this.sortedItems = this.items.sort((item1, item2): number => compareByString(item1, item2, fieldName)); 

в зависимости на ваш тип поля

function compareByNumber(item1, item2, fieldName){ 
    return item1[fieldName] - item2[fieldName]; 
} 
function compareByString(item1, item2, fieldName){ 
    return (item1[fieldName] < item2[fieldName] ? -1 : (item1[fieldName] === item2[fieldName] ? 0 : 1)); 
} 

function compareByBool(item1, item2, fieldName){ 
    return (item1[fieldName] === item2[fieldName] ? 0 : (item1[fieldName] ? -1 : 1)); 
} 

Answer 2

Нет, не может использовать трубу, поскольку это решение Angular team. Слишком много проблем с работой, которые все обвиняли в Angular, что было лишь частично правильным. Поэтому они сделали выбор, чтобы не включать его, и не рекомендую использовать для этого специальные трубы.

Подробнее об этом в официальных документах here. Это также объясняет, что вы можете сделать вместо этого. В основном напишите свой собственный метод заказа, например orderedListOfMessages(), и сделайте это в машинописном/javascript внутри вашего компонента.

Но помните, что это произойдет очень часто, поэтому, если вы знаете, что базовые данные не изменились, вы можете вместо этого добавить новую переменную orderedListOfMessages и обновить ее сразу после обновления данных.

Итак, первый подход прост, но его следует использовать с осторожностью (только очень простые и быстрые, например, 5-20 элементов).

Второй подход не слишком сложный, но требует больше усилий. Вы можете быть уверены, что он не будет перегружать страницу при перемещении мыши.

Это очень простой фрагмент код, кажется, работает хорошо для булева сравнения в ЯШАХ:

boolArray.sort(function(item1, item2){ return item1 ? 0 : 1});