在Angular2中我有一個ngFor並想要按1字段排序

在Angular2中我有一個ngFor，並且想要按1字段排序，但是沒有構建自定義管道。在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那麼項目應在陣列的頂部

來源

2016-11-06 AngularM

正如您可能已經注意到的，angular2故意沒有orderBy管道（請參閱：https://angular.io/docs/ts/latest/guide/pipes.html）。他們建議您保存排序元素的輔助數組並顯示它們。這對你有用嗎？ – Meir

你最好這麼做嗎？你有沒有lodash的例子？ – AngularM

您可以實現自己的排序，然後做

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)); 
}

來源

2016-11-06 18:00:53 Meir

你有一個比較布爾？ – AngularM

已被添加到答案。雖然請注意，具有大量「相等」值的排序可能需要更長的時間 – Meir

bool沒有工作 – AngularM

不，你不能使用管道，因爲這是Angular團隊的決定。大家都責怪Angular，表現太麻煩了，這只是部分正確。所以他們選擇不包含它，不建議使用自定義管道。

更多關於它的官方文檔here。它也解釋了你可以做什麼。基本上寫你自己的訂購方法，如orderedListOfMessages()，並在組件中打字稿/ JavaScript。

但是請記住它會經常發生，所以如果您知道底層數據沒有更改，您可以添加新變量orderedListOfMessages並在數據更新後立即更新。

所以第一種方法很簡單，但應謹慎使用（只有非常簡單和快速，可能像5-20個元素）。

第二種方法不是太複雜，但需要更多的努力。你可以確定它不會在鼠標移動時超載頁面。

這個非常簡單的代碼片段似乎JS做工精細的布爾比較：

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

來源

2016-11-06 17:53:26

感謝有關此信息。你有我的數組如何orderby 1字段類型的lodash示例？ – AngularM

你不需要lodash。使用Array.sort（（e）=> e.hasUnreadMessages）或其他東西。 HTTPS：//developer.mozilla。org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort –

我已經爲js添加了一個簡單的排序。你可以從那裏工作來做同樣的事情。 –

在Angular2中我有一個ngFor並想要按1字段排序

回答

相關問題