Angular中[(ngModel)]视图更新模型的原理及模拟失效问题

你对[(ngModel)]双向绑定的理解是准确的：它会被Angular编译器拆解为单向属性绑定[ngModel]="abc"和事件绑定(ngModelChange)="abc=$event"的组合。你的测试用例未达预期，核心问题是(ngModelChange)事件依赖ngModel指令的初始化，单独使用无法生效。

各测试用例问题拆解 #

• case1: 仅用[ngModel]="abc"是模型到视图的单向绑定，初始会同步abc的值到输入框，但视图修改不会触发模型更新——缺少事件绑定来同步视图变化到模型。
• case2: (ngModel)="abc"是错误写法，ngModel是输入属性，必须用方括号[]绑定，这个写法不会触发任何绑定逻辑，输入框为空且无法同步模型。
• case3: 仅绑定(ngModelChange)但未添加[ngModel]="abc"，ngModel指令未被初始化，输入框的变化不会触发ngModelChange事件，因此无法更新abc。正确模拟必须同时包含属性绑定和事件绑定。
• case4: 即便(ngModelChange)能触发，(ngModelChange)="$event"仅接收事件值却未赋值给abc，无法更新模型；再加上缺少[ngModel]，事件本身也不会触发。
• case5: 标准双向绑定写法，同时完成模型到视图的同步和视图到模型的事件监听，因此能双向同步。

修正后的模拟用例 #

要准确模拟[(ngModel)]="abc"，需同时添加[ngModel]和(ngModelChange)：

<p>case 3 fixed: Input with [ngModel] + (ngModelChange):<input type="text" [ngModel]="abc" (ngModelChange)="abc=$event"/></p>

修改后这个输入框会和case5表现一致：初始显示abc的值，修改输入框内容时，ngModelChange事件会将新值通过$event传递并赋值给abc，进而同步到case1和case6。

[(ngModel)]视图更新模型的完整流程 #

1. 用户在输入框输入内容，触发原生输入事件；
2. ngModel指令捕获输入变化，对值做必要处理（如类型转换）后，触发ngModelChange事件，将处理后的值通过$event传递；
3. 事件绑定(ngModelChange)="abc=$event"把$event的值赋值给模型变量abc，完成视图到模型的更新；
4. 模型abc更新后，单向绑定[ngModel]="abc"会将新值同步回视图，保证视图与模型状态一致。

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