Angular-双向数据绑定

双向数据绑定

主要代码如下

# [(ngModel)]="password"，使用[(ngModel)]进行绑定password属性
<input type="password" [(ngModel)]="password" value="{{password}}"/>

[(ngModel)]是一个Angular语法，用与把password绑定到输入框中。 它的数据流是双向的：从属性到输入框，并且从输入框回到属性。
不幸的是，做了这项改动之后，我们的程序崩溃了。 打开浏览器的控制台，我们会看到Angular抱怨说：“ngModel … isn’t a known property of input.”（ngModel不是input元素的已知属性）
虽然NgModel是一个有效的Angular指令，但它默认情况下却是不可用的。 它属于一个可选模块FormsModule。 我们必须选择使用那个模块。

导入FormMoule模块

打开app.module.ts文件，并且从@angular/forms库中导入符号FormsModule。 然后把FormsModule添加到@NgModule元数据的imports数组中，它是当前应用正在使用的外部模块列表。
修改后的AppModule是这样的：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';

import {AppComponent} from './app.component';
import {UserComponent} from './user/user.component';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

参考文献

• FormsModule
• ngModel
• 模板语法
• 表单
• Angular官网