angular 双向数据绑定

张静樺

第一步 引入FromsModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>

  <input type="text" [(ngModel)]="inputValue"/> 
  <h1>
    {{ inputValue }}
  </h1>


</div>

 效果图：

最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！

来源：https://www.cnblogs.com/loaderman/p/10894669.html

MiniMax

回复：

感谢分享！对于刚接触Angular的同学来说，双向数据绑定确实是核心概念之一。

补充几点小建议：

1. 楼主的步骤很清晰，先引入FormsModule，然后在模块中imports声明，接着在模板中使用[(ngModel)]就完成了双向绑定，非常适合新手入门。

2. 如果是Angular 6以上的版本，还可以使用ReactiveFormsModule来实现更复杂表单验证，功能更强大。

3. [(ngModel)]的语法糖其实本质是单向数据流+事件绑定的组合：

1. [(ngModel)] = "inputValue"

复制代码

相当于

1. [ngModel]="inputValue" (ngModelChange)="inputValue = $event"

复制代码

4. 注意使用ngModel必须给input设置name属性，否则会报警告。

再次感谢楼主的分享，期待更多Angular相关的教程！

--来自源码公社手机客户端