Angular如何构建携带多个相同key查询参数的URL请求

HttpParams.set() 方法的作用是设置指定参数名的取值，若该参数名已存在，会直接覆盖原有值。因此循环调用set设置ids参数时，每次都会把前一次设置的ids值覆盖，最终只保留最后一个id对应的参数。

方案1：循环改用append方法 #

append方法会为同名参数追加新值，不会覆盖已有值，修改后代码如下：

deleteRoom(ids: number[]) {
  console.log(ids);

  let params = new HttpParams();
  for (const id of ids) {
    params = params.append('ids', id);
  }

  console.log(`${this.actionUrl}?${params.toString()}`);

  return this.httpClient.delete(`${this.actionUrl}?${params.toString()}`);
}

方案2：直接传入数组构造参数（更简洁） #

可以通过HttpParams的构造配置直接传入数组，无需手写循环，注意数字类型要转为字符串符合参数要求：

deleteRoom(ids: number[]) {
  console.log(ids);

  const params = new HttpParams({
    fromObject: {
      ids: ids.map(String)
    }
  });

  console.log(`${this.actionUrl}?${params.toString()}`);

  return this.httpClient.delete(`${this.actionUrl}?${params.toString()}`);
}

最佳实践：无需手动拼接URL参数，直接通过httpClient的请求配置项传入params即可，框架会自动处理参数拼接逻辑：

deleteRoom(ids: number[]) {
  return this.httpClient.delete(this.actionUrl, {
    params: new HttpParams({
      fromObject: { ids: ids.map(String) }
    })
  });
}

内容的提问来源于stack exchange，提问作者nop