2017-02-20 13 views
2

次のように私はJSONを持っている:角度2に固有のフィルタはありますか?

[{ 
    "_id": "58a58ea23744cd46918914ef", 
    "entityId": "ce7200c1-3430-47ce-ab81-7d0622cb8cae", 
    "name": "Portugal", 
    "description": "Portugal", 
    "type": "country", 
    "category": "common", 
    "subcategory": "common", 
    "parent": { 
    "_id": "58a8486ca4890027348a8966" 
    }, 
    "image": { 
    "_id": "58a8486ca4890027348a8965" 
    }, 
    "metadata": { 
    "primary": "pt", 
    "taxRate": 20, 
    "exchangeRate": 0.7, 
    "language": "PT", 
    "currency": "EUR", 
    "_id": "58a8486ca4890027348a8964" 
    } 
}, { 
    "_id": "58a58ea23744cd46918914f1", 
    "entityId": "815b9e90-e36f-4488-ad50-6a259b6d034d", 
    "name": "Qatar", 
    "description": "Qatar", 
    "type": "country", 
    "category": "common", 
    "subcategory": "common", 
    "parent": { 
    "_id": "58a8486ca4890027348a8969" 
    }, 
    "image": { 
    "_id": "58a8486ca4890027348a8968" 
    }, 
    "metadata": { 
    "primary": "qa", 
    "taxRate": 20, 
    "exchangeRate": 0.7, 
    "language": "RO", 
    "currency": "RO", 
    "_id": "58a8486ca4890027348a8967" 
    } 
}, { 
    "_id": "58a58ea23744cd46918914f2", 
    "entityId": "e12ea227-c05c-42cf-b746-6bc537812a02", 
    "name": "Romania", 
    "description": "Romania", 
    "type": "country", 
    "category": "common", 
    "subcategory": "common", 
    "parent": { 
    "_id": "58a8486ca4890027348a896c" 
    }, 
    "image": { 
    "_id": "58a8486ca4890027348a896b" 
    }, 
    "metadata": { 
    "primary": "ro", 
    "taxRate": 20, 
    "exchangeRate": 0.7, 
    "language": "RO", 
    "currency": "RON", 
    "_id": "58a8486ca4890027348a896a" 
    } 
}, { 
    "_id": "58a58ea23744cd46918914f4", 
    "entityId": "8c22ccaf-f7b7-4009-9642-54580ad5ad4e", 
    "name": "Russia", 
    "description": "Russia", 
    "type": "country", 
    "category": "common", 
    "subcategory": "common", 
    "parent": { 
    "_id": "58a8486ca4890027348a8972" 
    }, 
    "image": { 
    "_id": "58a8486ca4890027348a8971" 
    }, 
    "metadata": { 
    "primary": "ru", 
    "taxRate": 20, 
    "exchangeRate": 0.7, 
    "language": "RU", 
    "currency": "RUB", 
    "_id": "58a8486ca4890027348a8970" 
    } 
}, { 
    "_id": "58a58ea23744cd46918914fa", 
    "entityId": "725b2011-177b-4fc5-8e1f-559b3e4e8958", 
    "name": "United States", 
    "description": "United States", 
    "type": "country", 
    "category": "common", 
    "subcategory": "common", 
    "parent": { 
    "_id": "58a8486ca4890027348a8984" 
    }, 
    "image": { 
    "_id": "58a8486ca4890027348a8983" 
    }, 
    "metadata": { 
    "primary": "us", 
    "taxRate": 20, 
    "exchangeRate": 0.7, 
    "language": "EN", 
    "currency": "USD", 
    "_id": "58 a8486ca4890027348a8982" 
    } 
}, { 
    "_id": " 58 a58ea23744cd46918914d8", 
    "entityId": "af884be9 - 067 d - 4 dd2 - 8646 - 5738 f5bb0efb", 
    "name": "Germany", 
    "description": "Germany", 
    "type": "country", 
    "category": "common", 
    "subcategory": "common", 
    "parent": { 
    "_id": "58 a8486ca4890027348a89b7 " 
    }, 
    "image": { 
    "_id": "58 a8486ca4890027348a89b6 " 
    }, 
    "metadata": { 
    "primary": "de", 
    "taxRate": 20, 
    "exchangeRate": 0.7, 
    "language": "DE", 
    "currency": "EUR", 
    "_id": "58 a8486ca4890027348a89b5 " 
    } 
}] 

をそして、私は次のコードでドロップダウンにこれらの値を表示しています:

テンプレート:

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"> 
    {{selectedCurrency}} 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li *ngFor="let currency of currencies"> 
     <a>{{currency.metadata.currency }}</a> 
    </li> 
    </ul> 
</div> 

を今あなたが見る場合、メタデータは重複しています"EUR"角度2のパイプがあるので、ユニークな値だけを表示できますmetadata.currency

+0

いいえ、あなたは*のカスタムを作成する必要があります* 'パイプ'。 – developer033

答えて

6

角度2には独自のフィルタがありますか?

いいえ、これを行うにはカスタムパイプを作成する必要があります。

しかし、私は実際にはpipeを作成するとは思わない、あなたのコンポーネントで行うことができます。

次の操作を行って、これらの項目のすべてユニークcurrenciesを取得することができます:

export class AnyComponent { 

    items: any[]; 
    currencies: string[]; 

    constructor() { 
    // Populate your items... "items = blabla" 

    // Get all currencies 
    const curr = items.map(data => data.metadata.currency); 

    // Unique currencies 
    this.currencies = curr.filter((x, i, a) => x && a.indexOf(x) === i); 
    } 
} 

次に、あなたのテンプレートに:

... 
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li *ngFor="let currency of currencies"> 
    <a>{{currency}}</a> 
    </li> 
</ul> 
+0

どこがユニークなフィルタですか? – user2280016

+0

これは 'ngOnInit'ではなく、コンストラクタで行うべきでしょうか? –

+0

それは両方の場所にある可能性があります。 – developer033

3

角度2にはユニークなフィルタがありますか?

いいえ、ありません。

同じ理由で、ではなく、のパイプを使用してフィルタリングとソートを行うのと同じ理由で、コンポーネントJSロジックでユニークなリストを作成する必要があります。

https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filterpipe-or-orderbypipe-から

フィルタリングやソート、特に、高価な操作です。 Angularがこれらのパイプメソッドを毎秒何度も呼び出すと、中程度のサイズのリストでもユーザーエクスペリエンスが著しく低下する可能性があります。

uniqは、ライブラリから利用可能な多くのバージョンのいずれかである、または独自のロール、または Setを使用
this.uniqueCurrencies = uniq(data.map(elt => elt.metadata.currency).filter(Boolean)); 

:あなたが好きなもので、欠けているものを省略し、通貨のユニークなリストを作成することができます

別の答えで提案されているように。

+0

この場合、サンプルがありますか? – user2280016

関連する問題