Angular中如何将字符串数组作为参数传递给后端API？

你的代码失效的核心原因是HttpParams是不可变对象，调用append()方法不会修改原实例，而是返回一个新的HttpParams对象，你需要将这个新对象重新赋值给变量。另外，传递数组参数给后端通常有两种常见方式，根据后端的接收逻辑选择即可：

方式一：重复参数名（推荐，多数后端框架默认支持） #

这种方式会生成类似 ?depKey=deploymentInprogress&depKey=deploymentMessage 的URL参数，后端可以直接用列表/数组类型接收：

const depKey = ['deploymentInprogress', 'deploymentMessage'];
let params = new HttpParams();
// 遍历数组，逐个添加参数
depKey.forEach(key => {
  params = params.append('depKey', key);
});

this.http.get(uri, { params })
  .pipe(
    take(1),
    catchError(error => throwError(() => error))
  )
  .subscribe(data => {
    // 处理返回数据
  });

简化写法（Angular 14+） #

可以用fromObject直接构建参数，Angular会自动处理数组为重复参数名：

const depKey = ['deploymentInprogress', 'deploymentMessage'];
const params = new HttpParams({
  fromObject: { depKey } // 自动转为多个depKey参数
});

this.http.get(uri, { params })
  .pipe(take(1), catchError(error => throwError(() => error)))
  .subscribe(data => {
    // 处理返回数据
  });

方式二：传递JSON字符串 #

如果后端期望接收JSON格式的数组参数，可以将数组转为JSON字符串传递，注意同样要重新赋值params：

const depKey = ['deploymentInprogress', 'deploymentMessage'];
let params = new HttpParams();
// 重新赋值params，接收append返回的新对象
params = params.append('depKey', JSON.stringify(depKey));

this.http.get(uri, { params })
  .pipe(
    take(1),
    catchError(error => throwError(() => error))
  )
  .subscribe(data => {
    // 处理返回数据
  });

这种方式生成的URL参数是 ?depKey=["deploymentInprogress","deploymentMessage"]，后端需要将参数值解析为JSON数组。

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