Angular2+中ngModel无法绑定表达式？报错原因及解决方法

报错原因 #

你写的这段代码<input type="text" name="username" [(ngModel)]="{{_current + 1}}" >有两个核心问题：

1. 双向绑定语法使用错误：[(ngModel)]是Angular的双向绑定语法，它直接接收一个可绑定的变量或合法表达式，不需要用插值语法{{}}包裹。用{{}}会把_current +1转换成字符串字面量，Angular无法识别这种格式的绑定值，直接触发语法报错。
2. 计算表达式无法双向绑定：就算去掉{{}}，直接写[(ngModel)]="_current +1"也会报错——双向绑定要求绑定目标是可读写的变量，而_current +1是一个只读的计算表达式，当用户在输入框输入内容时，Angular无法把新值赋值给这个表达式（总不能把输入值赋给_current+1吧？这不符合语法逻辑）。

解决方法 #

根据你的实际需求，分两种场景处理：

场景1：只需要显示_current+1的值，不需要用户输入反向修改_current

这种情况不需要双向绑定，用**单向绑定[value]**就足够了：

<input type="text" name="username" [value]="_current + 1" >

这样输入框会正确显示_current+1的计算结果，而且不会有绑定报错。

场景2：需要双向绑定（用户输入要同步回_current）

这时候得用一个中间变量来中转数据：

1. 在组件类里定义一个中间变量，初始化时赋值为_current+1：

// 组件.ts文件
export class YourComponent {
  _current: number = 0; // 假设你的初始值是0
  currentDisplay: number;

  ngOnInit() {
    this.currentDisplay = this._current + 1;
  }

  // 当输入框值变化时，同步回_current
  syncCurrentValue() {
    this._current = this.currentDisplay - 1;
  }
}

2. 模板里绑定这个中间变量，同时监听值变化来同步_current：

<input 
  type="text" 
  name="username" 
  [(ngModel)]="currentDisplay" 
  (ngModelChange)="syncCurrentValue()" 
>

这样既实现了初始显示_current+1，又能把用户输入的值反向计算后同步回_current，完美解决双向绑定的问题。

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