如何在 HttpClient 中的查询字符串中传递数组

Question

这是我的演员数组：

['Elvis', 'Jane', 'Frances']

如何在 HttpClient 中的查询字符串中传递此数组？

我尝试使用：

1(

let params = new HttpParams();
params = Params.append('actors[]', ['Elvis', 'Jane', 'Frances']);
this.http.get(url, { params: Params });

let params = new HttpParams().set('actors[]', ['Elvis', 'Jane', 'Frances']);
this.http.get(url, { params: Params });

let Params = new HttpParams();
Params = Params.append('actors[]', 'Jane');
Params = Params.append('actors[]', 'Elvis');
Params = Params.append('actors[]', 'Frances');
this.http.get(url, { params: Params }); 

由于 TypeScript 错误，第一个和第二个代码段不起作用：

[ts] 类型为"string

[]"的参数不能分配给类型为"string"的参数。

第 3 个代码段仅发送一个项目'actors[]': 'Frances'

Answer 1

我认为

最好的方法是将它们作为string添加到参数中，并让您的后端将其转换回array或list。

let actorList = ['Elvis', 'Jane', 'Frances']
let params = new HttpParams();
params = params.append('actors', actorList.join(', '));
this.http.get(url, { params: params });

Answer 2

根据界面，您可以像这样做

const params = new HttpParams({ 
   fromObject: { 'actors[]': ['Elvis', 'Jane', 'Frances'] } 
});
this.http.get(url, { params });

Answer 3

>适用于 Angular 6.0.6：

private getParams(query) {
let params: HttpParams = new HttpParams();
for (const key of Object.keys(query)) {
  if (query[key]) {
    if (query[key] instanceof Array) {
      query[key].forEach((item) => {
        params = params.append(`${key.toString()}[]`, item);
      });
    } else {
      params = params.append(key.toString(), query[key]);
    }
  }
}
return params;

}

结果：

/api/message?page=1&per=2&order_by=name&order_direction=asc&base_object%5B%5D=2&base_object%5B%5D=1

Answer 4

你可以简单地使用 JSON.stringify(( 来做到这一点

    let params = new HttpParams();
    const actors = ['Elvis', 'Jane', 'Frances'];
    params.append('actors', JSON.stringify(actors);
    this.http.get(url, { params });

Answer 5

这对

我有用。

let params = new HttpParams();
['Elvis', 'Jane', 'Frances'].forEach((actorName:string) =>{
  params = params.append(`actors[]`, actorName);
})

或

let params = new HttpParams();
let actorsArray:Array<string> = ['Elvis', 'Jane', 'Frances'];
actorsArray.forEach((actorName:string) =>{
  params = params.append(`actors[]`, actorName);
})

Answer 6

const actors = ['Elvis', 'Jane', 'Frances'];
let params = new HttpParams();
for (const actor of actors) {
  params = params.append('actors', actor);
}
this.http.get(url, { params: params }); 

Answer 7

我使用的是URLSearchParams而不是HttpParams。

使用 URLSearchParams，您需要将数组字符串化以将其设置为参数"键值存储"。

import { URLSearchParams } from '@angular/http';

let params: URLSearchParams = new URLSearchParams();
params.set('actors', JSON.stringify(yourArrayHere));

我认为这应该以与 HttpParams 相同的方式工作，因为两者都在 set 方法中使用键值映射，所以请尝试一下。

我希望这能帮助你。

更新：

let options = new RequestOptions({search: params});
this._http.get(url, options).map(...)

使用RequestOptions您还可以编辑标头和其他请求选项。

Answer 8

let actorsArray = ['Elvis', 'Jane', 'Frances'];
this.http.get(url, { params: { actors: actorsArray } });

Answer 9

您可以执行以下操作：

this.http.get(url, { params: { "actors[]": actorsArray } });

<</div> div class="one_answers">

我使用了这种方法，它在 Angular 10 中对我有用：

private paramMaker(data) : HttpParams
{
    let httpParams = new HttpParams();
    Object.keys(data).forEach((key) = > {
        if (Array.isArray(data[key]))
        {
            data[key].forEach((item, index) = > {
                httpParams = httpParams.append(key + '[' + index + ']', item);
            });
        }
        else
        {
            httpParams = httpParams.append(key, data[key]);
        }
    });
    return httpParams;
}

Answer 10

试试这个：

let params = new HttpParams();
let actorList = ['Elvis', 'Jane', 'Frances'];
actorList.forEach((actor: any)=> {
  params = params.append('actors[]', actor);
})

Answer 11

对于 .NET 7，这对我有用：

public async Task<IActionResult> GetItems([FromQuery(Name = "categoryIds")] List<int> categoryIds) {
   ...
}

然后在角度中：

getItems(categoryIds: number[]): Observable<Item[]> {
    const params = new HttpParams({ fromObject: { categoryIds: categoryIds.map(String) } });
    return this.http.get<Item[]>(`${environment.apiUrl}/api/ControllerName/Items`, { params });
}

Answer 12

这是一个简单的方法：

this.http.get(url, { 
    params: ['Elvis', 'Jane', 'Frances'].reduce((accumulator, name) => accumulator.append('names', name), new HttpParams())
});

Answer 13

添加它以防有人遇到它。我能够覆盖默认行为，但只能通过覆盖 HttpParams 类并使用拦截器。它将数组值的参数名称更改为追加预期的'[]'。

class ArrayHttpParams extends HttpParams {
    constructor(options?: any) {
        if (options.cloneParams) {
            const {encoder} : {encoder: HttpUrlEncodingCodec} = options.cloneParams;
            options.encoder = encoder;
        }
        super(options);
        if (options.cloneParams) {
            const {updates, cloneFrom, map} : {updates: any[], cloneFrom: any, map: Map<string, string>} = options.cloneParams;
            (<any>this).updates = updates;
            (<any>this).cloneFrom = cloneFrom || null;
            (<any>this).map = map;
        }
    }
    toString(): string {
        super.toString();
        const {encoder} : {encoder: HttpUrlEncodingCodec} = <any>this;
        return this.keys()
            .map(key => {
                const values = this.getAll(key);
                const encodedKey = encoder.encodeKey(key) + (values.length > 1 ? '[]' : '');
                return values.map(value => encodedKey + '=' + encoder.encodeValue(value)).join('&');
            })
            .filter(param => param !== '')
            .join('&');
    }
}
class MyInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let params = null;
        if (req.method === 'GET' && req.params) {
            params = new ArrayHttpParams({cloneParams: req.params});
        }
        req = req.clone({
            setHeaders: headers,
            params: params || req.params
        });
        return next.handle(req);
    }
}