Angular中select元素选中索引的双向数据绑定实现问题

错误原因 #

你当前的写法[(ngModel)]="m_array[m_selectedValueIndex]"，是将双向绑定的目标直接指向了数组对应下标的元素：

• 初始加载时只会做读操作，能正常读取索引2对应的three值，所以显示符合预期
• 手动选择新选项时，ngModel会触发写操作，把选中的字符串值直接写入绑定目标，也就是修改m_array[2]的内容，这就是数组被篡改、出现重复项的原因。全程索引变量m_selectedValueIndex本身没有参与绑定，自然不会更新。

正确实现方式 #

1. TS代码保持不变 #

public m_array = ["one", "two", "three", "four"];
public m_selectedValueIndex = 2;

2. 修改HTML模板逻辑 #

你需要将选项的值绑定为对应索引，再把ngModel直接绑定到索引变量上：

<select [(ngModel)]="m_selectedValueIndex">
  <!-- 用*ngFor的index语法拿到每一项的索引，绑定为option的值 -->
  <option *ngFor="let num of m_array; let i = index" [ngValue]="i">
    {{num}}
  </option>
</select>

如果后续需要获取选中的项的值，直接通过m_array[m_selectedValueIndex]读取即可。

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