角2は、ドロップダウンの繰り返しをフィルタアウトします

Question

誰も、角度2のドロップダウンリストでレポート結果をフィルタリングする方法を知っていますか？私は現在、テンプレート* ngFor内でそれをやろうとしていますが、運がありません。カスタムパイプも試してみます。データはJSON配列からのものです。私だけにしようとしています以下のオブジェクトでは、「国営事業体」

マイデータオブジェクト

items[ 
     { 
     "currentBUName":"Financial Services" 
     } 
     { 
     "currentBUName":"State Owned Entities" 
     } 
     { 
     "currentBUName":"State Owned Entities" 
     } 
    ] 

マイTSコードエキス

<ion-item> 
    <ion-label>Please select current business unit</ion-label> 
     <ion-select [(ngModel)]="selectedValue"> 
      <ion-option *ngFor="let indexx of this.items;"[value]="indexx">{{indexx.currentBUName}}</ion-option> 
     </ion-select> 
    </ion-item> 

Answer 1

あなたの1つのインスタンスを示し、 itemsの値を設定すると、フィルタ関数を使用して一意の値を取得するだけです。

this.items = this.items.filter((v, i, arr) => arr.indexOf(v) === i); 

注：これはそうのように行うことができます。このデータは、サーバから来ている場合、それは、ワイヤ全体で来ている重複した情報の量を減らすために、このフィルタリングサーバサイドを行うには、より理にかなって。

Answer 2

なぜアレイを使用しないのですかfilter？

items = [ 
    { 
    "currentBUName":"Financial Services" 
    } 
    { 
    "currentBUName":"State Owned Entities" 
    } 
    { 
    "currentBUName":"State Owned Entities" 
    } 
] 
uniqueItems = items.filter(function(item, pos) { 
    return items.indexOf(item) == pos; 
}) 

その後、uniqueItems代わり

Answer 3

他の回答を使用するには良いですが、あなたがこれを行う可能性があります一つの方法は、いくつかのより一般的なユーティリティ機能

function groupBy<T>(values: T[], keySelector: (value: T) => string): {[key: string]: T[]} { 
    return values 
     .map(value => ({ key: keySelector(value), value })) 
     .reduce((groups, { key, value }) => ({ 
     ...groups, 
     [key]: groups[key] && groups[key].concat(value) || [value] 
     }), {}); 
} 

function distinctBy<T>(values: T[], keySelector: (value: T) => string): T[] { 
    const groups = groupBy(values, keySelector); 
    return Object.values(groups).map(([representative]) => representative); 
} 

の面でそれを定義することです次に、あなたが書くことができます

this.items = distinctBy(incomingItems, item => item.currentBUName);