在Angular 11中添加多个同名参数

Posted 2023-02-25

【中文标题】在Angular 11中添加多个同名参数

【英文标题】：Add multiple parameters with same name in Angular 11

【发布时间】：2022-01-17 22:04:54

【问题描述】：

我想要做的是添加多个具有相同名称的参数以使用 Angular 11 请求 URL：

http://example.com/somepath?data=1&data=2&data=3

I've seen this post, but accepted answer is not eligible to me because it is Angular 1.

我试过的是：

private getParams(value: string): HttpParams 
    const values = value.split("/");    

    const httpParams = new HttpParams();    

    values.forEach((item) => httpParams.set('value', item));    
    return httpParams;

然后我尝试发送它：

public getConfig(view: string): Observable<IFooBar[]> 
    const params = this.getParams(view);
    return this.http.get<IFooBar[]>(`$somePerson/someMethod`,  params );  

但是 url 变成了没有参数：

http://localhost:8000/api/somePerson/someMethod

如何发送同名参数？

【问题讨论】：

为什么不直接localhost:8000/api/somePerson/someMethod?values=1,2,3,4

也许是因为你调用getParamsView来获取参数，而函数名为getParams？至少，根据您发布的内容。

@R.Richards 抱歉，这是错字。我已经更新了答案

@Nick 我不知道。像你问的那样发送参数是最佳做法吗？

@Learner 如果您只想为单个参数设置多个值，我建议您这样做，并在您的路由处理程序中使用 .split(',') 拆分它们，就是这样，您现在有了一个值数组

【参考方案1】：

原因已设置，并且 append 返回一个新实例，因此请确保保持更新。基于doc。

let params = new HttpParams().append('value', '1');
params = params.append('value', '2');
params = params.append('value', '3');
params = params.append('value', '4');

console.log(params.getAll('value'));

所以你应该这样写：

private getParams(value: string): HttpParams 
  const values:string[] = value.split("/");    

  let httpParams:HttpParams = new HttpParams();    

  values.forEach((item) => 
    httpParams = httpParams.append('value', item)
  );    

  return httpParams;

【参考方案2】：

在你的情况下，我可能会像这样在同一个参数上传递更多值：

public getConfig(view: string): Observable<IFooBar[]> 
    const params = [1, 2, 3, 4, 5, 6];
    return this.http.get<IFooBar[]>('somePerson/someMethod',  params:  values: params.join(',')  );  

在您的服务器端点中（使用 express 发布示例）：

app.get('somePerson/someMethod', (req, res) => 
    const values = req.query.values?.split(',');
    /* Now you have your values as an array of values */
);