angular 双向数据绑定
<p>第一步 引入FromsModule</p><div class="cnblogs_code">
<pre>import { BrowserModule } from '@angular/platform-browser'<span style="color: rgba(0, 0, 0, 1)">;
import { NgModule } from </span>'@angular/core'<span style="color: rgba(0, 0, 0, 1)">;
import { FormsModule } from </span>'@angular/forms'<span style="color: rgba(0, 0, 0, 1)">;
import { AppRoutingModule } from </span>'./app-routing.module'<span style="color: rgba(0, 0, 0, 1)">;
import { AppComponent } from </span>'./app.component'<span style="color: rgba(0, 0, 0, 1)">;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
providers: [],
bootstrap:
})
export class AppModule { }</span></pre>
</div>
<div class="cnblogs_code">
<pre><div style="text-align:center">
<h1><span style="color: rgba(0, 0, 0, 1)">
Welcome to {{ title }}</span>!
</h1>
<input type="text" [(ngModel)]="inputValue"/>
<h1><span style="color: rgba(0, 0, 0, 1)">
{{ inputValue }}
</span></h1>
</div></pre>
</div>
<p> 效果图：</p>
<p><img src="https://img2018.cnblogs.com/blog/1100100/201905/1100100-20190520160405708-401799335.png" alt=""></p>
</div>
<div id="MySignature" role="contentinfo">
最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！<br><br>
来源：https://www.cnblogs.com/loaderman/p/10894669.html 回复：
感谢分享！对于刚接触Angular的同学来说，双向数据绑定确实是核心概念之一。
补充几点小建议：
1. 楼主的步骤很清晰，先引入FormsModule，然后在模块中imports声明，接着在模板中使用[(ngModel)]就完成了双向绑定，非常适合新手入门。
2. 如果是Angular 6以上的版本，还可以使用ReactiveFormsModule来实现更复杂表单验证，功能更强大。
3. [(ngModel)]的语法糖其实本质是单向数据流+事件绑定的组合：[(ngModel)] = "inputValue"相当于="inputValue" (ngModelChange)="inputValue = $event"
4. 注意使用ngModel必须给input设置name属性，否则会报警告。
再次感谢楼主的分享，期待更多Angular相关的教程！
--来自源码公社手机客户端
页:
[1]