如何在Angular下拉框中移除JSON数组的重复值？

嘿，我来帮你搞定这个重复值的问题！你遇到的情况是因为不同国家可能使用同一种货币，遍历所有国家的currencies数组时自然会出现重复的name字段。下面给你两种实用的解决方案：

方案一：在组件中预处理数据（推荐） #

这种方式性能更优，因为我们只在数据加载时做一次去重处理，不会在模板渲染阶段反复计算。

1. 在你的Region组件中，获取数据后提取所有货币名称并完成去重：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-region',
  templateUrl: './region.component.html',
  styleUrls: ['./region.component.css']
})
export class RegionComponent implements OnInit {
  countries: any[] = [];
  uniqueCurrencyNames: string[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get<any[]>('https://restcountries.eu/rest/v2/all')
      .subscribe(countryData => {
        this.countries = countryData;
        
        // 提取所有非空的货币名称，避免下拉框出现空选项
        const allCurrencyNames = countryData.flatMap(country => 
          country.currencies.map(curr => curr.name).filter(name => name)
        );
        
        // 利用Set自动去重的特性，将其转回数组
        this.uniqueCurrencyNames = [...new Set(allCurrencyNames)];
        
        // 可选：给货币名称排序，让下拉框选项更整洁
        this.uniqueCurrencyNames.sort();
      });
  }
}

2. 在模板中直接遍历去重后的数组：

<select>
  <option *ngFor="let currency of uniqueCurrencyNames" [value]="currency">
    {{ currency }}
  </option>
</select>

方案二：使用自定义管道（适合动态复用场景） #

如果需要在多个组件复用去重逻辑，或者数据源会频繁更新，可以自定义一个去重管道：

1. 创建一个UniquePipe：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'unique',
  pure: false // 设为非纯管道，确保数据变化时重新计算（注意：大数据量下可能有性能开销）
})
export class UniquePipe implements PipeTransform {
  transform(items: any[], key: string): any[] {
    if (!items || !key) return [];
    
    const seenValues = new Set();
    return items.filter(item => {
      const value = item[key];
      // 过滤空值并完成去重
      if (value && !seenValues.has(value)) {
        seenValues.add(value);
        return true;
      }
      return false;
    });
  }
}

2. 在模板中使用管道（先把所有国家的currencies扁平为一个数组）：

<select>
  <option 
    *ngFor="let currency of countries.flatMap(country => country.currencies) | unique: 'name'"
    [value]="currency.name"
  >
    {{ currency.name }}
  </option>
</select>

小提醒：非纯管道会在每次变更检测时运行，如果你的数据量很大，优先选择方案一哦。

内容的提问来源于stack exchange，提问作者vennapusa