Angular修改同名变量后radio button单选按钮取值异常问题咨询

• Angular 模板作用域的变量查找遵循局部变量优先级高于组件全局变量的规则，你的问题完全由[(ngModel)]的绑定对象随局部变量名修改发生变化导致：

1. 两个变量同名时，[(ngModel)]="option[i]"命中的是*ngFor循环生成的局部option对象，相当于给这个临时的子选项对象新增了一个数字下标的无关属性，不会修改全局this.option数组，只有ngModelChange触发的手动逻辑在操作全局数组，因此输出符合预期。
2. 修改局部循环变量名后，模板中[(ngModel)]="option[i]"无法命中局部变量，自动匹配到全局的option数组。此时选中单选框会直接把当前单选框的[value]值（完整的子选项对象）自动赋值给this.option[i]，相当于给全局数组多插入了一条原始子选项数据，后续ngModelChange逻辑又追加了符合结构的目标对象，最终就出现了多余的数组项。

你当前的单选框逻辑不需要为每个单选框单独绑定ngModel，直接删除[(ngModel)]="option[i]"即可，你已经通过ngModelChange拿到了选中值。如果需要保留双向绑定，可以将整组单选框绑定到同一个组件临时变量：

// 组件中新增临时变量
selectedSubOption: any;

<!-- 模板修改input的绑定逻辑 -->
<input type="radio" class="float-right form-check-input position-static"
  name="{{option.extra_option_id}}" [value]='option' [(ngModel)]="selectedSubOption"
  (ngModelChange)='changeEventInRadioButton($event)' style="margin: 0;">

即可避免意外修改全局option数组。

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