각도 2를 사용하여 드롭 다운에 고유 값만 표시하는 방법

Question

* ngFor를 사용하여 'accountNumber'를 (를) 드롭 다운에 표시 할 JSON 데이터가 있습니다. 동일한 계정 번호를 가진 JSON 데이터에 여러 항목이 있으므로 드롭 다운에 동일한 계정 번호가 여러 번 표시됩니다. enter image description here

HTML :

<div class="btn btn-default dropdown-toggle" type="button" 
    id="dropdownMenu" data-toggle="dropdown" aria-expanded="true"> 

    <span>Select</span> 
    <span class="caret"></span> 
    <ul class="select-menu" aria-labelledby="dropdownMenu"> 
    <li *ngFor="#account of accounts">{{account.accountNumber}}</li> 
    </ul> 
</div> 

JSON : 나는 그것이 사용자 정의 파이프를 필요로하지만,하지 않습니다 가정입니다 드롭 다운에서 계좌 번호의 중복 값을 표시 피할 수있는 방법

`[ 
{ 
    "accountNumber": 7890, 
    "transactionDate": "4/2/2016", 
    "postingDate": "4/3/2016", 
    "description": "Pok Pok Thai", 
    "category": "Restaurants", 
    "amount": 15.00 
}, 
{ 
    "accountNumber": 7890, 
    "transactionDate": "4/3/2016", 
    "postingDate": "4/4/2016", 
    "description": "Pok Pok Hai", 
    "category": "Hotel", 
    "amount": 25.00 
}, 

{ 
    "accountNumber": 8901, 
    "transactionDate": "4/6/2016", 
    "postingDate": "4/7/2016", 
    "description": "Pok Pok Fai", 
    "category": "Dairy", 
    "amount": 55.00 
}, 
{ 
    "accountNumber": 8901, 
    "transactionDate": "4/7/2016", 
    "postingDate": "4/8/2016", 
    "description": "Pok Pok Aai", 
    "category": "Automotive", 
    "amount": 65.00 
}, 

{ 
    "accountNumber": 4567, 
    "transactionDate": "4/9/2016", 
    "postingDate": "4/10/2016", 
    "description": "Pok Pok Cai", 
    "category": "Healthcare", 
    "amount": 85.00 
}, 
{ 
    "accountNumber": 4567, 
    "transactionDate": "4/10/2016", 
    "postingDate": "4/11/2016", 
    "description": "Pok Pok Dai", 
    "category": "Healthcare", 
    "amount": 95.00 
}, 

{ 
    "accountNumber": 8901, 
    "transactionDate": "4/12/2016", 
    "postingDate": "4/13/2016", 
    "description": "sit amet", 
    "category": "Software", 
    "amount": 115.00 
} 
]` 

어떻게해야하는지.

저는 Angular 2를 처음 사용하여 해결책을 찾았지만 내 필요에 맞는 것을 찾을 수 없었습니다.

Answer 1

이미 예제와 함께 파이프의 기본 explaing가 게시되어 How to apply filters to *ngFor

이 경우 http://plnkr.co/edit/E7HlWeNJV2N3zwPfI51Q?p=preview에 대한 작업 plunker을보기를 .. 내가 lodash 라이브러리와 uniqBy 기능을 사용한 후, 파이프는 정말 간단하다 :

declare var _: any; // lodash, not strictly typed 

@Pipe({ 
    name: 'uniqFilter', 
    pure: false 
}) 
@Injectable() 
    export class UniquePipe implements PipeTransform { 
     transform(items: any[], args: any[]): any { 

     // lodash uniqBy function 
     return _.uniqBy(items, args); 
    } 
} 

.. 및 구성 요소의 사용 :

<div> 
    <ul> 
     <li *ngFor="let account of accounts | uniqFilter: 'accountNumber'">{{ account.accountNumber }}</li> 
    </ul> 
</div> 

,

EDIT : 플 런커를 최신 각도 버전으로 업데이트하고 필터링 매개 변수를 파이프에 추가했습니다.