Angular2 있음 ngFor 있고 orderby 1 필드를

Question

Angular2 나는 ngFor 있고 orderby 1 필드 원하는 있지만 사용자 지정 파이프 빌드.

사용할 수있는 기본 제공 장치가 있습니까? 내가 item.hasUnreadMessages에 의해 주문하려는

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

:

이 내 코드입니다.

하지만이 작업을 수행하는 가장 간단한 방법이 필요합니다.

나는 angular2와 타이프 라이터와 HTML5를 사용하고

내 시도 :

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

가 따라 할 수 있습니다 :

이 매우 간단 조각은 JS에서 부울 비교를 위해 잘 작동하는 것 같다 입력란에

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 팀의 결정이므로 파이프를 사용할 수 없습니다. 성능에 문제가 너무 많아서 모두가 부분적으로 만 수정 한 Angular를 비난했습니다. 그래서 그들은 그것을 포함하지 않기로 결정했고 그것을 위해 커스텀 파이프를 사용하지 않는 것이 좋습니다.

공식 문서에 대한 자세한 내용 here. 또한 대신 수행 할 수있는 작업에 대해 설명합니다. 기본적으로 orderedListOfMessages()과 같은 주문 방법을 작성하고 구성 요소의 typescript/javascript에서 수행하십시오.

그러나 매우 자주 발생하므로 기본 데이터가 변경되지 않았다는 것을 알고있는 경우 새 변수 orderedListOfMessages을 추가하고 데이터가 업데이트 된 직후에 한 번 업데이트 할 수 있습니다.

첫 번째 방법은 간단하지만 신중히 사용해야합니다 (매우 간단하고 빠르며 5-20 개의 요소 만 가능).

두 번째 방법은 복잡하지 않지만 더 많은 노력이 필요합니다. 당신은 그것이 마우스 이동에 페이지를 오버로드하지 않을 것이라고 확신 할 수 있습니다.

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