Angular HttpRequest 不发送参数答案

【问题标题】：Angular HttpRequest doesn't send ParamsAngular HttpRequest 不发送参数
【发布时间】：2021-01-26 23:37:56
【问题描述】：

我正在尝试使用 HttpRequest 将参数发送到一个简单的 GET 请求。但是好像没有发送参数。

let params = new HttpParams();
params.set("page", "4");

let req = new HttpRequest<any>(
  "GET",
  "https://reqres.in/api/users",
  null,
  { params }
);

this.http
  .request<any>(req)
  .pipe(
    map(_r => {
      let _resp = _r as HttpResponse<any>;
      return _resp.body;
    })
  )
  .subscribe(s => console.log(s));

上面的代码应该返回第 4 页的结果。但它只有在我插入 "?page=4" 时才有效网址。

运行代码： https://stackblitz.com/edit/http-request-dont-send-params?file=src/app/app.component.ts

【问题讨论】：

标签： angular httprequest

【解决方案1】：

HttpParams() 对象是不可变的。每次调用它都会返回一个新的 params 副本。

  // Change to this

let params = new HttpParams().set("page", "4");

// Or you could do this

let params = new HttpParams();
params = params.set("page", "4");

这应该让它为你工作。在您共享的运行代码中工作。 https://stackblitz.com/edit/http-request-dont-send-params-nku9kc?file=src/app/app.component.ts

【讨论】：

【解决方案2】：

尝试使用：

new HttpParams().append() 用于发送查询参数

let params = new HttpParams();
params.append("page", "4");

尝试检查一下 stackblitz

我想这会对你有所帮助

【讨论】：

【解决方案3】：

最好的方法是使用下面的代码

const params = new HttpParams({ fromObject: { page: 4, size: 10, order: 'desc'}});

这样你可以添加任意数量的参数

【讨论】：