Angular 5中如何为HttpParams设置多个参数？

嗨，这个坑我之前踩过！确实，Angular 5开始HttpParams改成了不可变对象，这意味着你调用set()、append()这类方法时，不会直接修改原有的HttpParams实例，而是返回一个全新的实例。你原来的代码里只是调用了set()但没把返回的新实例赋值回去，所以最后params还是初始的空对象，自然传不出参数。

给你几种可行的解决方案：

方案一：循环中重新赋值（基础写法） #

每次调用set()后，把返回的新实例赋值给变量，这样每次循环都会更新参数：

paramsObject: any;
let params = new HttpParams(); // 这里用let，因为要重新赋值
for (let key in paramsObject) {
  // 必须把set返回的新实例重新赋值给params
  params = params.set(key, paramsObject[key]);
}

方案二：使用fromObject直接初始化（推荐写法） #

Angular 5的HttpParams提供了更简洁的初始化方式，直接传入fromObject参数就能把普通对象转换成HttpParams，不用手动循环：

paramsObject: any;
const params = new HttpParams({ fromObject: paramsObject });

这个方法不仅代码更短，还能自动处理大部分常规参数类型，非常省心。

方案三：处理多值参数（比如数组类型） #

如果你的参数是同一个key对应多个值（比如?ids=1&ids=2），可以用append()方法，同样要注意重新赋值：

let params = new HttpParams();
params = params.append('ids', '1');
params = params.append('ids', '2');

核心要点就是记住：HttpParams是不可变的，所有修改操作都会返回新实例，必须重新赋值才能生效。

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