Angular双向绑定失效变为单向绑定问题求助

你的代码里用的是单向属性绑定[value]="email"，这种绑定只会把组件中的email值渲染到输入框，但输入框的内容变化不会同步回组件的email变量，所以修改后回车，控制台输出的还是初始值。

下面是两种可行的修复方案：

方案一：使用Angular双向数据绑定 #

Angular的双向绑定语法[(ngModel)]可以同时实现视图到组件、组件到视图的数据同步，步骤如下：

1. 修改模板中的input标签：

<input type="text" [(ngModel)]="email" (keyup.enter)="onKeyEnter()"/>

2. 导入FormsModule（因为ngModel属于Angular表单模块，默认未全局导入）：
   在你的根模块（比如AppModule）中添加以下导入：

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

@NgModule({
  imports: [
    // 保留其他已有的导入，比如BrowserModule等
    FormsModule
  ],
  // ...其他模块配置
})
export class AppModule { }

方案二：手动同步输入值（无需导入额外模块） #

如果不想引入表单模块，可以通过事件参数手动获取输入框的最新值并更新组件变量：

1. 修改模板，在回车事件中传递输入框的值：

<input type="text" [value]="email" (keyup.enter)="onKeyEnter($event.target.value)"/>

2. 更新组件中的onKeyEnter方法：

onKeyEnter(newEmail: string) {
  this.email = newEmail;
  console.log("My new email id : ", this.email);
}

两种方案都能解决你的问题，方案一更简洁适合常规场景，方案二适合轻量需求或不想引入表单模块的情况。

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