Angular使用*ngFor与NgModel实现的动态下拉框无法选中选项如何解决

问题修复方案 #

你遇到的是Angular下拉框双向绑定不生效的问题，按以下步骤排查修改即可解决：

1. 首先确认对应功能模块的imports数组中已经导入了FormsModule，这是[(ngModel)]双向绑定生效的必要依赖，未导入的话绑定逻辑不会生效。
2. 给默认占位选项加上和newSelector初始值匹配的value属性。如果你的newSelector初始值是空字符串，占位选项修改为：

<option value="">Choose a Selector</option>

3. 如果stixService.granularMarkingSelectors里每个元素的value是对象类型而非字符串、数字等基础类型，需要把[value]替换为[ngValue]，[value]仅支持基础类型值绑定，对象类型必须用[ngValue]才能正确识别同步。

修改后的完整代码示例：

<select type="text" class="form-control" [(ngModel)]="newSelector" name="selectors" id="selectors">
  <option value="">Choose a Selector</option>
  <option *ngFor="let item of stixService.granularMarkingSelectors" [ngValue]="item.value">
    {{item.label}}
  </option>
</select>

如果你的item.value是基础类型，把[ngValue]换回[value]即可。

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