TypeScript中删除数组重复数据实现Angular下拉框BinCode选项唯一

实现方案 #

你可以在拿到接口返回数据后，基于BinCode字段对数组做去重处理即可，无需修改原有HTML模板逻辑，具体修改如下：

步骤1：修改TypeScript中的接口回调逻辑 #

onQualityControlWareHouseStock(item)
{    
  alert(item)
  this.qualitycontrolservice.getWareHouseStock(item).subscribe((x:any) =>  {
    // 新增BinCode去重逻辑
    const existedBinCodes = new Set();
    this.qualityControlWareHouseStock = x.Result.filter(stockItem => {
      if (!existedBinCodes.has(stockItem.BinCode)) {
        existedBinCodes.add(stockItem.BinCode);
        return true;
      }
      return false;
    });                           
  })
}

可选优化：增加类型校验 #

如果项目中已经定义了完整的WareHouse类型，建议替换掉接口返回的any类型，提升代码可维护性：

interface WareHouse {
  BinCode: string;
  // 补充其他模型字段
}

// 回调指定类型
.subscribe((x: {Result: WareHouse[]}) => {
  // 去重逻辑同上
})

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