Question

我有一个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" 。是否有一个带有angular2的管道，以便我只能显示metadata.currency

的唯一值

Answer 1

角度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>

Answer 2

角度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。

角2中是否有独特的过滤器？

2 个答案: