角度删除可观察对象中的重复项

Question

在这个 mat-option 中，我试图显示来自我订阅的 observable 的数据。

   <mat-option *ngFor="let option of (filteredCustomer | async)?.Items"
   [value]="option" (onSelectionChange)="searchDest($event)">
   {{option.Cityname}} 
   </mat-option>

observable的名字是filteredCustomer。

现在在 mat 选项中，我尝试显示城市名称。结果就是这样。

Los Angeles
Boston
Detroit
Los Angeles
Washington
Los Angeles

如你所见，我有重复。

是否可以删除重复项（如 sql 中的 distinct）？

我的 observable 来自这个 ts 文件：

public filterCity() {
 var parameters = new CitySearchParameters(100, 0);
 parameters.City = this.city;    
 this.filteredCustomer = this.customerService.get(parameters);
 if (typeof (this.city) == "object") {
  var curCity: any = this.city;
  this.city = curCity.City;
 }
}

谢谢

Answer 1

您可以使用 Array#filter 和 Array#findIndex 来删除数组中的重复项。

// credit: https://stackoverflow.com/a/36744732/6513921
private uniqueArray(target: Array<any>, property: any): Array<any> {
  return target.filter((item, index) =>
    index === target.findIndex(t => 
      t[property] === item[property]
    )
  );
}

然后，您可以使用 map 运算符从控制器中的可观察对象“捕获”发射，并在将它们渲染到模板中之前删除重复项

public filterCity() {
  var parameters = new CitySearchParameters(100, 0);
  parameters.City = this.city;
  this.filteredCustomer = this.customerService.get(parameters).pipe(
    map(customer => ({
      ...customer,
      Items: uniqueArray(customer.Items, 'Cityname')  // <-- remove duplicates by `Cityname` property
    }))
  );
  if (typeof (this.city) == "object") {
    var curCity: any = this.city;
    this.city = curCity.City;
  }
}

扩展运算符... 用于在来自可观察对象的发射中保留除Items 属性数组之外的其他属性。它已被修改以删除重复项。

Answer 2

你可以使用RxJS reduce 操作符来保持你的异步管道工作，像这样，假设你正在删除基于.Cityname 属性的重复项

public filterCity() {
  var parameters = new CitySearchParameters(100, 0);
  parameters.City = this.city;
  this.filteredCustomer = this.customerService.get(parameters).pipe(
    reduce((list, val) => {
      if (!list.length) return [val]
      const foundIndex = list.findIndex((item) => item.cityname === val.cityname);
      if (foundIndex === -1) {
        list.push(val);
      }

      return list;
    }, [])
  );
  if (typeof(this.city) == "object") {
    var curCity: any = this.city;
    this.city = curCity.City;
  }
}

Answer 3

Set 对象允许您存储任何类型的唯一值，无论是原始值还是对象引用。

因此您可以转换列表，重复项将被删除。

    let list = [...new Set(this.filteredCustomer)];

另一种使用过滤器的方法

let chars = ['A', 'B', 'A', 'C', 'B'];

let uniqueChars = chars.filter((c, index) => {
    return chars.indexOf(c) === index;
});

console.log(uniqueChars); // results = [ 'A', 'B', 'C' ]