Angular报错：无法为只读模板变量buttonName赋值，求解决方法

错误原因 #

你在模板的点击事件里直接执行buttonName=''，试图给模板变量buttonName赋值，但Angular的模板变量是只读的，不能直接修改，这就是报错的核心原因。

解决方案 #

方案1：使用双向绑定（推荐，符合Angular数据流理念） #

通过[(ngModel)]绑定组件类中的变量，实现输入框值的双向同步，清空操作直接修改组件变量即可。

1. 修改app.component.html：

<input type="text" [(ngModel)]="inputValue" class="form-control">
<div class="input-group-append">
  <button class="btn btn-primary" (click)="addItem(inputValue); inputValue='';">Add</button>
</div>

2. 在app.component.ts中添加绑定变量：

inputValue = '';
model = new Model();

addItem(value:string){
  if(value!=""){
    this.model.items.push(new TodoItems(value,false));
  }
}

3. 确保AppModule中导入FormsModule（ngModel依赖此模块）：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已导入模块
    FormsModule
  ],
  // 其他配置项
})
export class AppModule { }

方案2：直接操作输入框的value属性 #

如果不想使用双向绑定，可以通过模板变量获取输入框DOM元素，修改它的value属性来清空内容（模板变量本身只读，但可以修改其指向元素的属性）：

修改app.component.html的点击事件：

<input type="text" #buttonName class="form-control">
<div class="input-group-append">
  <button class="btn btn-primary" (click)="addItem(buttonName.value); buttonName.value='';">Add</button>
</div>

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