Angular >= 4.3，httpClient.get 参数为空答案

【问题标题】：Angular >= 4.3, httpClient.get params emptyAngular >= 4.3，httpClient.get 参数为空
【发布时间】：2020-09-04 20:48:09
【问题描述】：

我正在尝试将我的 Http 请求迁移到 HttpClient 请求。我能够迁移我的post 查询，但在迁移get 查询时遇到了问题。当我这样做时，我的后端没有分别收到任何参数，它告诉我参数没有提供并且为空。

我是不是做错了什么？

import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';

constructor(private httpClient: HttpClient) {}

findItems() {
   let params: HttpParams = new HttpParams();
   params.set('something', 'hello');

   this.httpClient.get<any[]>('http://localhost:3000/apath/', {params})
    .subscribe((results: any[]) => {
      console.log(results);
    }, (errorResponse: any) => {
       console.error(errorResponse);
    });
}

有什么想法吗？

【问题讨论】：

看到这个Why HttpParams doesn't work in multiple line in angular 4.3
感谢@Maximus 指出这一点。使用set 解决问题。希望将来在我必须使用许多参数时改进附加功能以使我的代码更干净；）

标签： angular angular-http

【解决方案1】：

目前HttpParams是不可变的，你应该设置参数如下：

// for set method
let params: HttpParams = new HttpParams().set('something', 'hello');
// for append method
let params: HttpParams = new HttpParams().append('something', 'hello');

HttpParams 的set 和append 方法会用set 和set 和append 更新的新实例覆盖原来的params 实例，最后返回新实例。

所以我们可以在下面的多行中做到这一点：

let params: HttpParams = new HttpParams();
params = params.set('something', 'hello');          
params = params.append('something2', 'hello2');

Plunker demo

重要：

从Angular v5.0.0开始，您可以使用fromObject from HttpParamOptions同时添加多个参数。

const param = new HttpParams({fromObject: {aaa: '1', bbb: '222'}});

也可以直接将object参数设置为HttpClient方法

const obj = {aaa: '1', bbb: '222'};
this.http.get('test', { params: obj}).subscribe();

参考demo，第二种方式请检查浏览器网络确认参数添加成功。

【讨论】：

Thx，我刚刚注意到，在您写答案的同时；）我也尝试了 append，它没有用。设置看起来像要走的路。希望它不会保持不变，当我有很多参数要添加到 HttpParams 时，代码不会变得那么可读。
@PeterParker 我也同意你的意见。将第二种方式标记为无效。感谢您的信息。
@Pengyy，另见Why HttpParams doesn't work in multiple line in angular 4.3
@Maximus 谢谢！只需查看common/http/params 的来源，似乎set 和append 是相同的。这让我困惑了一段时间。所以我们可以做params = params.append(something, 'a')?
@Pengyy，不完全一样。传递给clone - value, op: 'a'} 的操作类型不同。但他们都返回了一个克隆警察

【解决方案2】：

HttpParams 是不可变的。 set() 创建并返回一个新的 HttpParams 实例，而不改变调用 set() 的实例。所以代码应该是

const params = new HttpParams().set('status', status);

【讨论】：