HttpClientModule中追加多个字符串查询参数时请求参数为空问题

你遇到的问题我一眼就看出来啦——问题出在HttpParams的不可变性上！

先看你这段代码：

public ObterSimulacao<T>(inscricao:string,listaDatas: string[]){ 
  let params = new HttpParams(); 
  listaDatas.forEach(data => { 
    params.append('listDate',data) 
  }); 
  return this.http.get<T>(this._obterSimulacaoUrl + inscricao ,{params}); 
}

Angular的HttpParams是不可变对象，每次调用append()、set()这类方法时，它不会修改原来的params实例，而是返回一个全新的HttpParams对象。你现在的代码里只是调用了append，但根本没把返回的新对象赋值回params，所以最初创建的空params一直没变，请求发出去自然就没有参数啦！

修复方案一：forEach中重新赋值params #

把append的结果重新赋值给params就行，修改后的代码：

public ObterSimulacao<T>(inscricao:string,listaDatas: string[]){ 
  let params = new HttpParams(); 
  listaDatas.forEach(data => { 
    // 关键：把append返回的新对象赋值给params
    params = params.append('listDate',data) 
  }); 
  return this.http.get<T>(this._obterSimulacaoUrl + inscricao ,{params}); 
}

修复方案二：用reduce更简洁构建params #

如果你喜欢更函数式的写法，用reduce来构建params会更优雅：

public ObterSimulacao<T>(inscricao:string,listaDatas: string[]){ 
  const params = listaDatas.reduce((acc, data) => {
    return acc.append('listDate', data);
  }, new HttpParams()); 
  return this.http.get<T>(this._obterSimulacaoUrl + inscricao ,{params}); 
}

这样修改后，你的请求就会带上所有listDate的查询参数啦～

内容的提问来源于stack exchange，提问作者Daniel Bezerra De Menezes