Angular 4中如何实现合并城市选项绑定并使搜索筛选生效

嘿，我明白你遇到的麻烦了——把Bangalore和Bengaluru合并成一个下拉选项后，筛选就不管用了对吧？这其实是因为你传给后端的是Bangalore/Bengaluru这种复合字符串，但后端只认单个城市名，自然匹配不到结果。下面给你具体的解决办法：

问题出在哪？ #

你现在的applyFilter函数是直接把选中的完整值（比如Bangalore/Bengaluru）当成单个参数传给后端，但数据库里存的是独立的Bangalore或Bengaluru，后端根本不知道这个斜杠分隔的字符串是两个城市，所以筛选失效是必然的。

怎么解决？拆分复合值，传多个筛选参数 #

我们只需要修改applyFilter函数，让它能识别带斜杠的复合值，拆成单个城市名后，把这些名字作为同一个city参数的多个值传给后端就行（前提是后端能接收同一个参数的多个值，这个后面说）。

修改后的applyFilter代码 #

applyFilter(key: string, value: string) {
  // 先把这个key的旧过滤条件清掉
  this.filter.delete(key);

  if (value && value !== 'null') {
    // 检查值里有没有斜杠，有的话拆成数组存起来
    if (value.includes('/')) {
      const splitValues = value.split('/').map(val => val.trim());
      this.filter.set(key, splitValues);
    } else {
      this.filter.set(key, value.trim());
    }
  }

  // 构建请求参数，处理单个值或多个值的情况
  let p = new HttpParams();
  this.filter.forEach((v, k) => {
    if (Array.isArray(v)) {
      // 如果是数组，循环给同一个key加多个参数
      v.forEach(val => {
        p = p.append(k, val);
      });
    } else {
      p = p.append(k, v);
    }
  });

  // 后面的请求逻辑不用改
  this.loading = true;
  this.jobService.searchJob(p).subscribe(res => {
    this.loading = false;
    this.valueStack = res;
    this.jobs = res.jobs || [];
  }, err => {
    this.loading = false;
    this.jobs = [];
  });
}

后端也要配合调整哦 #

别忘了让后端接口支持接收同一个参数的多个值：

• 比如用Java/Spring Boot的话，接口参数可以写成@RequestParam List<String> city
• 然后查询数据库的时候，用IN条件来匹配多个城市（比如WHERE city IN (:cities)）

额外小提示 #

如果后端暂时改不了，也可以把拆分后的城市用逗号拼成字符串（比如Bangalore,Bengaluru）传给后端，让后端自己拆分处理，但这种方式不如多参数规范，能改后端的话优先选前者。另外，下拉选单的显示和value都不用改，用户完全感觉不到变化，只是筛选逻辑在背后做了处理~

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