Angular >= 4.3, httpClient.get 参数为空

Question

我正在尝试将我的 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);
    });
}

有什么想法吗？

Answer 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 方法将用 [=15= 更新的实例覆盖原来的 params 实例] 和 append，最后是 return 新实例。

所以我们可以在多行中完成，如下所示：

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

Plunker demo

重要提示：

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

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

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

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

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

Answer 2

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

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

Angular >= 4.3, httpClient.get 参数为空

Angular >= 4.3, httpClient.get params empty

angular-http

angular