使用Angular向服务端发送购物车数据 如何遍历mycart动态生成订单参数

你可以通过遍历购物车数组动态拼接商品参数，实现代码如下：

// 先初始化公共参数
let body = new HttpParams()
.set('user_id', user_id)
.set('address_id', '89')
.set('final_price', this.grandtotal)
.set('payment_method', 'cod')
.set('txnid', '')
.set('payment_status', '0')
.set('slot_time', '12pm to 2pm');

// 遍历购物车数组，动态添加商品参数
this.mycart.forEach((product, idx) => {
  // 注意HttpParams是不可变对象，每次set后需要重新赋值
  body = body
    .set(`product_id[${idx}]`, product.id)
    .set(`product_name[${idx}]`, product.name)
    .set(`product_price[${idx}]`, product.price)
    .set(`quantity[${idx}]`, product.quantity)
    .set(`product_unit[${idx}]`, product.value);
});

// 发起请求逻辑不变
return this.httpClient.post(this.REST_API_SERVER+'user/place_order2', body.toString(), {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
});

核心说明 #

• 使用forEach遍历this.mycart数组，通过第二个参数idx获取当前商品的索引，动态拼接符合后端要求的参数名格式
• 特别注意：Angular的HttpParams是不可变类型，每次调用set方法会返回新的实例，必须重新赋值给body变量才能让参数生效，否则只会保留第一次初始化的公共参数
• 原代码里的const声明要改成let，否则后续重新赋值body会触发语法报错

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