Есть ли уникальный фильтр в угловом 2?

80
7

У меня есть json:

[{
"_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

спросил(а) 2017-02-20T04:42:00+03:00 3 года, 7 месяцев назад
1
Решение
127

Есть ли уникальный фильтр в угловом 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>

ответил(а) 2017-02-20T05:14:00+03:00 3 года, 7 месяцев назад
80

Есть ли уникальный фильтр в угловом 2?

Нет, нет.

Вы должны создать уникальный список в логике JS вашего компонента по той же причине, что рекомендуется не использовать каналы для фильтрации и сортировки.

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

Фильтрация и особенно сортировка - дорогостоящие операции. Пользовательский режим может сильно ухудшаться для списков даже умеренного размера, когда Angular вызывает эти методы труб много раз в секунду.

Вы можете создать уникальный список валют, опустив отсутствующие, с чем-то вроде:

this.uniqueCurrencies = uniq(data.map(elt => elt.metadata.currency).filter(Boolean));

где uniq - это любая из многих версий, доступных из библиотек, или сворачивайте свои собственные, или используйте Set как предложено в другом ответе.

ответил(а) 2017-02-20T04:53:00+03:00 3 года, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема