Angular中能否将ngModel双向绑定到Map对象的条目上？

这个双向绑定需求完全可实现。你原有写法的核心问题是：[(ngModel)]双向绑定要求绑定目标是可读写的引用，直接在绑定表达式里调用myDictionary.set()属于一次性方法执行，既无法在用户输入时更新Map值，也无法在TS侧修改Map后同步回显到输入框，还会因为Angular变更检测反复执行模板表达式导致值被意外覆盖。

TS侧逻辑 #

1. 正确声明Map实例，使用标准TS Map类型定义：

   // 组件类中声明Map实例
   myDictionary = new Map<number, string>();
   // 你的循环源数据
   parameters: Array<{code: string}> = [];
   
   ngOnInit() {
     // 所有初始化赋值逻辑放到TS侧执行，不要写在模板绑定里
     this.parameters.forEach((param, index) => {
       this.myDictionary.set(index, this.setStartingValue(param.code));
     });
   }
   
   // 按钮触发修改输入值的方法
   setValueOfInput(index: number, targetValue: string) {
     this.myDictionary.set(index, targetValue);
   }
   
   // 你原有的初始值计算方法
   setStartingValue(code: string): string {
     // 原有业务逻辑保持不变即可
     return code;
   }
   

模板侧逻辑 #

*ngFor循环内的输入框不要直接用简写的[(ngModel)]绑定set方法，需要拆成值读取和值更新两部分绑定，分别对接Map的get和set方法：

<div *ngFor="let parameter of parameters; let i = index">
  <!-- [ngModel]负责从Map读值展示，(ngModelChange)负责把用户输入的新值写入Map -->
  <input
    type="text"
    [ngModel]="myDictionary.get(i)"
    (ngModelChange)="myDictionary.set(i, $event)"
  >
  <button (click)="setValueOfInput(i, 'some value')">设置输入值</button>
</div>

禁止在模板绑定表达式中写会修改数据状态的方法调用（比如你之前写在ngModel里的set操作）。Angular每次变更检测都会重跑所有模板表达式，这类写法会导致重复赋值、数据异常、性能损耗等问题，所有数据初始化、修改逻辑都应该放在TS侧执行。

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