Angular表单开发报错：Uncaught Error: Cannot assign to a reference or variable!

嘿，这个错误我之前开发Angular表单的时候也踩过坑！它的本质是Angular的模板编译器会阻止你直接给模板引用变量（比如用#xxx定义的变量）或者结构指令创建的局部变量（比如*ngFor里的let item）赋值，尤其是用[(ngModel)]双向绑定的时候特别容易触发这个问题。

常见错误场景&解决方案 #

场景1：在*ngFor中绑定基本类型的局部变量

比如你可能写了这样的代码：

// 组件类
names: string[] = ['Alice', 'Bob'];

<!-- 错误模板：直接绑定到基本类型的局部变量name -->
<div *ngFor="let name of names">
  <input [(ngModel)]="name">
</div>

这里的name是*ngFor循环生成的局部变量，属于基本类型（字符串），Angular不允许直接对它赋值——因为基本类型是值传递，修改它根本不会同步回组件的数组，还会打破模板绑定规则。

解决方法：把数组改成对象数组，绑定对象的属性：

// 组件类修改为对象数组
names = [{ value: 'Alice' }, { value: 'Bob' }];

<!-- 正确模板：绑定对象的属性 -->
<div *ngFor="let nameObj of names">
  <input [(ngModel)]="nameObj.value">
</div>

场景2：绑定到模板引用变量的属性

比如你错误地把ngModel绑定到了模板引用变量的属性：

<!-- 错误模板：绑定到模板引用变量myInput的value -->
<input #myInput [(ngModel)]="myInput.value">

这里的#myInput是用来获取DOM元素引用的模板变量，它是只读的引用，不能作为双向绑定的目标。

解决方法：绑定到组件类中定义的属性：

// 组件类添加属性
inputValue = '';

<!-- 正确模板：绑定到组件类的属性 -->
<input [(ngModel)]="inputValue">

场景3：直接给模板引用变量赋值

还有一种情况是在事件绑定中直接给模板引用变量赋值，比如：

<!-- 错误示例：试图给模板引用变量赋值 -->
<button (click)="myInput = 'test'">点击修改</button>
<input #myInput>

这种操作也会触发同样的错误，因为模板引用变量只是一个引用，不能被直接赋值。

解决方法：改为操作组件类的属性，再通过属性绑定同步到模板。

核心总结 #

这个报错的关键在于：你试图修改的变量是模板层面的临时引用/局部变量，而不是组件类中声明的可绑定属性。只要确保双向绑定（或赋值操作）的目标是组件类里定义的属性，或者在循环中使用对象类型的元素来绑定其属性，就能解决这个问题。

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