Angular获取多单选组值生成提交对象时遇diff错误求助

我来帮你搞定这个问题，咱们先把问题根源搞清楚，再一步步解决：

你碰到的 Error: Error trying to diff 'Option 2'. Only arrays and iterables are allowed 错误，核心原因是你把数组 question.options 绑定到了单选框的 ngModel 上。单选框的 ngModel 应该绑定一个单个值（用来存储选中项的标识），而不是整个选项数组——Angular在试图对比数组和选中的字符串值时，自然就抛出了这个错误。

1. 给每个问题添加选中状态属性 #

首先，你需要给 data.questions 里的每个question对象新增一个属性，比如 selectedOptionCode，用来存储当前问题选中的选项code。如果是从接口获取的数据，可以在组件初始化时补全这个属性：

ngOnInit() {
  // 模拟数据或接口返回后，初始化每个问题的选中属性
  this.data.questions.forEach(question => {
    question.selectedOptionCode = ''; // 初始为空，也可以设为默认选中项的code
  });
}

2. 修正单选框的ngModel绑定 #

把原来单选框代码里的 [(ngModel)]="question.options" 改成绑定到新增的 selectedOptionCode：

<input type="radio" 
       id="{{option.order}}" 
       [(ngModel)]="question.selectedOptionCode" 
       value="{{option.code}}" 
       name="{{question.order}}">

这样每个单选框被选中时，对应的 option.code 就会被赋值给当前question的 selectedOptionCode，完全符合单选框对 ngModel 绑定单个值的要求。

3. 重构getJsonResult()方法 #

现在每个问题都有了明确的选中选项code，修改方法来生成你需要的目标对象格式：

getJsonResult() { 
  const data = { 
    lessonCode: "test", 
    answers: this.data.questions.map(question => { 
      return { 
        questionCode: question.code, 
        optionCode: question.selectedOptionCode 
      }; 
    }) 
  }; 
  this.submitData = data; 
  console.log(JSON.stringify(this.submitData));
}

这个方法会遍历所有问题，把每个问题的code和它对应的选中选项code组合成你需要的answers数组元素，最终生成的结构完全匹配你期望的格式。

做完这些修改后，当你选择单选框并调用getJsonResult()，控制台输出的JSON应该就是：

{
  "lessonCode": "test",
  "answers": [
    {"questionCode": "question-1", "optionCode": "option-2"},
    {"questionCode": "question-2", "optionCode": "option-3"}
  ]
}

不仅完全符合你的需求，那个恼人的diff错误也会彻底消失。

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