Angular(5) - 英雄编辑器 - 官方教程英雄指南之双向绑定 （详细解说）

1 输入和输出的绑定, 修改相应的代码如下， 你会发现我们增加了一个 [(ngModel)]="hero.name" 的属性

src/app/heroes/heroes.component.html (HeroesComponent's template)

<div>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name"/>
  </label>
</div>

2 保存却出错了，原因是我们没有添加引入的模块

3 全局引入

app.module.ts (@NgModule imports)

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

4 导入进模块, 聪明的你会发现既有import也有export, 这是因为import后，我们全局就可以在编程范围内使用，而export则是提供给其他的组件使用。

imports: [
  BrowserModule,
  FormsModule
],

5 刷新页面,你会发现我们已经实现了双向绑定，在textbox输入的时候，上面的hero.name也会随之发生变化， 就是这么简单，加油吧，骚年。