Angular 5中如何将多选下拉框的数组值转换为字符串

很简单，你只需要在提交表单之前把数组格式的job_front_color转换成逗号分隔的字符串就可以了，不用修改表单本身的逻辑，直接在onSubmit方法里处理数据就行。

具体实现思路：

• 先创建表单数据的副本（避免直接修改原表单对象，防止影响表单的状态管理）
• 检查job_front_color是否为有效数组，然后用join(', ')方法把数组转成目标格式的字符串
• 用处理后的新数据发送API请求

修改后的onSubmit代码如下：

onSubmit(form) {
  // 复制表单数据，避免修改原表单对象
  const submitData = { ...form };

  // 将多选下拉的数组值转换为逗号分隔的字符串
  if (submitData.job_front_color && Array.isArray(submitData.job_front_color)) {
    submitData.job_front_color = submitData.job_front_color.join(', ');
  }

  // 发送处理后的请求数据到API
  return this._http.post(
    'http://localhost:8000/api/v1/jobInstructionForm ',
    submitData,
    { headers: this.headers }
  ).subscribe(res => {
    this.flashMsg.flashMsg('success', 'added', 'JIF added');
    this._router.navigate(['pages/jif']);
  });
}

这样处理后，submitData里的job_front_color就会变成"pink, black"这种字符串格式，完全符合API的接收要求。如果之后还有其他多选下拉框需要类似处理，只需要复制这段判断和转换的逻辑，替换对应的字段名即可。

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