如何在HttpParams中设置字符串数组 实现同一查询参数多次赋值

你的问题出在没有对数组类型的参数值做拆分处理，直接把整个数组作为单个值调用append，因此只会生成一组键值对。HttpParams本身支持重复调用append()方法添加同名key的参数，修改方案如下：

方案1：手动遍历处理数组 #

// 注意这里的key要替换成你实际需要的filterBidAwardStatus，不要用arr
let myObj = {
  filterBidAwardStatus: ['Awarded', 'Not awarded']
}


getAuctionBIds(queryParams) {
  let params = new HttpParams();
  for(let key in queryParams) {
    const val = queryParams[key];
    // 数组类型遍历每一项添加
    if (Array.isArray(val)) {
      val.forEach(item => {
        params = params.append(key, item);
      })
    } else {
      params = params.append(key, val);
    }
  }
  return this.http.get('api-service.com/auctions', {params})
}

方案2：直接使用HttpParams构造函数的fromObject配置 #

HttpParams构造函数的fromObject参数原生支持数组值自动拆分，不需要手动遍历，写法更简洁：

getAuctionBIds(queryParams) {
  const params = new HttpParams({
    fromObject: queryParams
  });
  return this.http.get('api-service.com/auctions', {params})
}

两种方案最终生成的查询参数都能达到你预期的filterBidAwardStatus=Awarded&filterBidAwardStatus=Not%20awarded效果。

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