Angular调用Web API后下拉框去重过滤NULL无数据返回问题

嘿，我帮你看看代码里的问题——你现在遇到的无数据问题，主要是两个核心地方出了错：

第一个大坑：异步操作的时序问题 #

你把处理数据的for循环写在了subscribe外面，但Angular里的HTTP请求是异步的！也就是说，当你的循环执行的时候，API还没返回数据，this.ShipmentList还是个空数组，循环根本没东西可处理。这是很多刚接触异步操作的开发者容易踩的坑~

第二个问题：过滤条件写反了 #

你修改后的if条件逻辑搞反了，导致所有数据都被跳过了。原来的条件是if( (flags[xxx] || xxx)) continue，意思是「如果这个名称已经存在，或者名称不为空/Null，就跳过」——那不管是重复值还是有效新值，全被跳过了，最后shipTo自然是空的。

修正后的完整代码 #

先把循环移到subscribe的回调里，再修正过滤条件：

// 先初始化flags对象，避免报错
const flags: Record<string, boolean> = {};
// 清空目标数组，避免重复累积数据
this.shipTo = [];

service.get<ShipmentByProject[]>(this.entityUrl).subscribe(x => {
  this.ShipmentList = x;
  
  for(let i=0; i< this.ShipmentList.length; i++) {
    const shiptoName = this.ShipmentList[i].customer_shipto_name;
    
    // 正确逻辑：如果已存在，或者值为Null/空字符串，就跳过
    if(flags[shiptoName] || !shiptoName) {
      continue;
    }
    
    flags[shiptoName] = true;
    this.shipTo.push(shiptoName);
  }
});

更优雅的写法（可选） #

如果你觉得for循环有点繁琐，也可以用数组的filter+Set来实现，代码更简洁高效：

service.get<ShipmentByProject[]>(this.entityUrl).subscribe(x => {
  this.ShipmentList = x;
  
  // 先过滤掉Null/空值，再用Set去重，最后转成数组
  const uniqueShiptos = new Set(
    this.ShipmentList
      .map(item => item.customer_shipto_name)
      .filter(name => name)
  );
  
  this.shipTo = Array.from(uniqueShiptos);
});

这样既解决了异步问题，又正确实现了「去重+过滤Null/空值」的需求~

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