Angular 查询参数，例如 httpd_query_params

Question

我目前正在使用带有功能测试的 API。所以我知道我会对下面的网址做出很好的回应：/api/v1/investisseurs?vehicule%5B0%5D=4等效的 url 解码/api/v1/investisseurs?vehicule[0]=4使用 Angular 发出我的呼叫，HttpParams如下所示getInvestors(params: HttpParams): Promise<MelodiiaCollectionResponse> {    console.log(params);    return <Promise<MelodiiaCollectionResponse>>this.http.get(environment.httpdBackHost + '/investisseurs', {       params: params,}).toPromise();这个结果在我的浏览器中带有以下请求/api/v1/investisseurs?vehicule%5B%5D=%5B%222%22%5D&page=1&max_per_page=15等效的 url 解码/api/v1/investisseurs?vehicule[]=["2"]&page=1&max_per_page=15http_build_query问题，如何在 Angular 7中使用与 php 方法相同的查询参数编码？我想避免自己重新实现轮子:)预先感谢您的帮助

Answer 1

您可以使用HttpParamsbuilder 通过链接append方法自动解析您的参数。并且使用一些减速器，您可以在 httpParams 中提供数组值

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

//Whatever...

getInvestors(vehicules: number[], page: number, maxPerPage: number): Promise<MelodiiaCollectionResponse> {

  const params = vehicules.reduce(

    (previous, vehicule, index) => previous.append(`vehicule[${index}]`, vehicule.toString()),

     new HttpParams()

   )

   .append('max_per_page', maxPerPage.toString())

   .append('page', page.toString())

  return this.http.get<MelodiiaCollectionResponse>(`${environment.httpdBackHost}/investisseurs`, {

     params,

  }).toPromise();

}