在Angular 12中,ngModel绑定需要导入FormsModule模块。确保在您的应用程序模块中导入这个模块。
例如,您可以在您的app.module.ts中这样写:
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule // 在这里导入FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
一旦FormsModule被导入,您就可以在您的组件模板中使用ngModel绑定了,例如:
在这个例子中,变量'username"与输入框中的值进行了双向绑定。确保在您的模板中使用了[(ngModel)]语法来进行双向数据绑定。
如果您需要使用ngModel指令进行单向数据绑定,可以这样写:
但是,这种使用方式需要事先设置一个初始值,例如:
export class AppComponent {
username: string = "John Doe";
}
这个变量'username”将会在组件初始化的时候设置为'John Doe",并且在输入框中显示出来。
通过导入FormsModule并正确使用ngModel指令,您应该能够成功地进行数据绑定。