Angular TypeScript中为HttpParams设置动态键值对的方法

你当前代码里的{ p.id: p.value }写法会把键解析成字符串"p.id"，而不是p.id变量的实际值，这就是动态键不生效的核心原因。以下两种方案可以解决这个问题：

方案一：使用ES6计算属性名 #

通过方括号包裹变量，让对象将变量值作为键名，适配appendAll的参数要求：

let params = new HttpParams();
properties.forEach(p => {
    params = params.appendAll({ [p.id]: p.value });
});

方案二：直接使用append方法 #

如果只是单个键值对的添加，直接调用append方法更直观，它支持直接传入动态字符串键和对应值：

let params = new HttpParams();
properties.forEach(p => {
    params = params.append(p.id, p.value);
});

注意：HttpParams是不可变对象，每次调用append或appendAll后必须重新赋值给params变量，这部分你原代码的处理是正确的。

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