Angular2 * ng繰り返しでは、配列から一意の値だけを出力するにはどうすればよいですか？

Question

パイプを内蔵していますか？

data = [ 
    {id: 5, name: 'Roger'}, 
    {id: 5, name: 'Mark'}, 
    {id: 5, name: 'Zach'}, 
    {id: 5, name: 'Mark'}, 
    {id: 5, name: 'Roger'}, 
]; 

<ul> 
    <li *ngFor="let datum of data"> 
    {{datum.name}} 
    </li> 
</ul> 

---

Output

• ロジャー
• マーク
• ザック
• マーク
• ロジャー

---

Desired Output

• ロジャー
• マーク
• ザック

Answer 1

独自のパイプを作成することができます。

import { Pipe, PipeTransform } from '@angular/core'; 
import * as _ from 'lodash'; 

@Pipe({ 
    name: 'unique', 
    pure: false 
}) 

export class UniquePipe implements PipeTransform { 
    transform(value: any): any{ 
     if(value!== undefined && value!== null){ 
      return _.uniqBy(value, 'name'); 
     } 
     return value; 
    } 
} 

コンポーネントをUniquePipeに追加し、HTMLファイルにパイプを追加する必要があります。

<ul> 
    <li *ngFor="let datum of data | unique"> 
    {{datum.name}} 
    </li> 
</ul> 

Answer 2

これは少し古いですが、私はこれを見つける将来の人々のための答えを追加したいと思います。

回答は、目標を達成するパイプを使用することを推奨しますが、この場合は推奨される方法ではありません。ここでは、非常に特殊な複製フィルターであるリストフィルターについて説明します。この操作の最悪の場合の大きなOは、ほぼn^2であるか、そうでなければかなりメモリを消費します（あなたのアプローチに依存します）。パイプ操作はすべての変更検出サイクルで実行され、角度トリガの検出を頻繁に変更します。このリストが非常に長い場合、またはこれを練習すると、アプリが停止し、パフォーマンス上の問題が顕著になります。

角度1は実際には「フィルタ」パイプを含んでいましたが、この悪い習慣の結果であったパフォーマンス問題に対して、フィルタパイプを悪用したために角度1が発生したため、角度2で取り除きました。パイプは、数値や文字列の書式設定など、非常に小さなデータ変換用です。

これを行う方法は、コードでリストをフィルタリングし、変更検出に頼るのではなく自分でフィルタリングをトリガするロジックを構築することです（リストが実際に変更されたときなど）。これは非常にユースケース固有のものなので、このケースではどうすればいいのか正確に言うのは難しいです。このリストは、（それが必要として）観測可能なストリームから来ている場合は、1つの、かなり一般的な例は、単にマップ演算子でこれを行うと非同期（async）を使用、なりそうのような：ここ

利点は、フィルタ演算ONLYときに観察ストリームトリガあなたはフィルタリングが発生したとき以上の非常に高い制御を持っているし、まだについて推論するのは非常に簡単で、非常に「正しく行われるようにしてください」であるので（[配列から重複を削除Angular2]の可能性のある重複