Angular Http 客户端 - 如何将嵌套的参数对象传递给 GET API

Question

我正在使用最新版本的 angular (8)。我正在将我的 Http 请求从原始 http 转换为新的 http 客户端。我正在调用 GET API，并通过以下方式发送嵌套参数：

let data: any = {filters: {"4e9bc554-db54-4413-a718-b89ffdb91c2f": "465c1ab-2b89-4b51-8a7b-5d2ac862ee32"}, is_indexed: true}
return this.httpClient.get<Register[]>('/registers/', {headers: headers, params: data});

上面的代码，嵌套的参数无法识别。如何使用 HttpClient 作为嵌套参数正确传递？ Ps 在旧的 Http 中，使用上面的代码没有问题。提前感谢您的帮助。

更新 网址看起来类似于：

https://www.somepapi.com/registers/?filters=%7B%224e9bc554-db54-4413-a718-b89ffdb91c2f%22:%228465c1ab-2b89-4b51-8a7b-5d2ac862ee32%22%7D&is_indexed=true;

Answer 1

您可以递归地遍历数据对象以将其展平。

getData(data: any) {
  let params = {};    

  this.buildHttpParams(params, data, "");

  return this.httpClient.get("...", {params: params})
}

private buildHttpParams(params: any, data: any, currentPath: string) {
    Object.keys(data).forEach(key => {
        if (data[key] instanceof Object) {
            this.buildHttpParams(params, data[key], `${currentPath}${key}.`);
        } else {
            params[`${currentPath}${key}`] = data[key];
        }
    });
}

这将改变我们的数据对象：

{
  filters: {
    "4e9bc554-db54-4413-a718-b89ffdb91c2f": "465c1ab-2b89-4b51-8a7b-5d2ac862ee32"
  },
  "is_indexed": true
}

到：

{
  "filters.4e9bc554-db54-4413-a718-b89ffdb91c2f": "465c1ab-2b89-4b51-8a7b-5d2ac862ee32",
  "is_indexed": true
}

Answer 2

这是我在 Angular 中通过使用JSON.stringify 序列化传递嵌套对象的工作方法：

const stringifiedParams = JSON.stringify(this.filterParams);
return this.http.get<any[]>(`jobs`, {params: {filter: stringifiedParams}});

在 Node 中，这将使用 JSON.parse 反序列化参数：

filter = JSON.parse(req.query.filter.toString());

Answer 3

您可以使用 qs 将您的对象字符串化为 url 查询字符串，然后在 HttpParams 构造函数上使用本机 fromString 导入

let data: any = {filters: {"4e9bc554-db54-4413-a718-b89ffdb91c2f": "465c1ab-2b89-4b51-8a7b-5d2ac862ee32"}, is_indexed: true}

const params = new HttpParams({fromString: qs.stringify(data)});

return this.httpClient.get<Register[]>('/registers/', {headers: headers, params});

对我来说可以很好地处理复杂的对象。

见https://npmjs.com/package/qs和https://www.npmjs.com/package/@types/qs

Answer 4

您的解决方案现在应该这样实现：

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

let params: any = new HttpParams();

// Begin assigning parameters
params = params.append('filters', {"4e9bc554-db54": "23473473-7938", "555555-db54": "33333-7938"});
params = params.append('is_indexed', true);
return this.httpClient.get<Register[]>('/registers/', {headers: headers, { params });

除此之外还有一个 set 属性，您可以在 Angular 的文档中进一步查看。