Angular属性绑定失效求助：输入框值无法同步到组件变量

问题场景 #

组件中已定义textVal变量，初始值为空字符串，点击按钮触发onClickBtn方法时，控制台始终打印空值，输入框内容完全未同步到组件变量中。

组件代码：

export class AppComponent {
  numVal = 1235;
  cssClass = 'hello';
  title = 'AngularAppTest';

  textVal: string = '';
  onClickBtn() {
    console.log(this.textVal);
  }
}

HTML的两种写法均无效：
写法一：

<input type="text" value={{textVal}} />
<button (click)="onClickBtn()">Check Binding</button>
<span style="display: block;">Value: {{textVal}}</span>

写法二：

<input type="text" [value]=textVal />
<button (click)="onClickBtn()">Check Binding</button>
<span style="display: block;">Value: {{textVal}}</span>

问题原因 #

你使用的是单向数据绑定：value={{textVal}}和[value]="textVal"仅能将组件的textVal值同步到输入框，但输入框中用户输入的内容不会反向更新组件内的textVal变量。因此无论输入什么，组件里的textVal始终是初始空字符串，打印结果自然为空。

解决方案 #

要实现输入框与组件变量的双向同步，可采用以下两种方式：

方案1：使用[(ngModel)]双向绑定

这是Angular官方推荐的双向绑定方式，步骤如下：

1. 在对应模块（如AppModule）中导入FormsModule：

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

@NgModule({
  imports: [
    // 其他导入项
    FormsModule
  ]
})
export class AppModule { }

2. 修改HTML中的输入框绑定：

<input type="text" [(ngModel)]="textVal" />
<button (click)="onClickBtn()">Check Binding</button>
<span style="display: block;">Value: {{textVal}}</span>

方案2：手动绑定+事件监听

若不想引入FormsModule，可通过[value]单向绑定结合input事件实现同步：

<input type="text" [value]="textVal" (input)="textVal = ($event.target as HTMLInputElement).value" />
<button (click)="onClickBtn()">Check Binding</button>
<span style="display: block;">Value: {{textVal}}</span>

修改完成后，输入框内容会实时同步到组件的textVal变量，点击按钮即可打印当前输入内容。

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