学习内容

这一篇的内容，是纪录阅读官方文件 tutorial: A Hero Editor 的笔记，接续昨天的内容，写出下半部内容。

Two-way binding

在之前的范例中，使用者应该可以透过 input 栏位来更改英雄的 name 属性内容，此时，就可以透过为 input 栏位绑上双向绑定的属性，让使用者可以在 input 栏位里面看到绑定的英雄名称之外，也可透过这个 input 栏位来更改这个英雄姓名。

在 Angular 里面用的双向绑定的语法就是 [(ngModel)] 後面接要被绑定的属性。

所以，我们来修改一下 heroes.component.html 的内容

--- heroes.component.html --- 
<div>
  <label for="name">Hero Name: </label>
  <input id="name" [(ngModel)]="hero.name" placeholder="name">
</div>

以上这个内容就会为 input 栏位双向绑定 hero 物件的 name 的属性。

双向绑定范例的错误

所以，如果你一路按照官方文件的 Tour of Heroes 教程中的 1. The Hero Editor 这个章节里面的操作步骤写到这边，在 input 栏位上加入 [(ngModel)] 後，应该会报下面的错误

意思是说不能为 input 栏位绑上[(ngModel)] 的错误。
会造成这个错误的原因是因为，我们没有引入 FormsModule 模组到我们的 app 元件里面。
那我们就只需将 FormsModule 这个模组引入到 app.module.ts 的 @NgModule 区块的 imports 阵列中，就可以解决这个错误罗。

--- app.module.ts ---
// ...
import { FormsModule } from '@angular/forms';  // 引入 FormsModule  

@NgModule({
  [...]
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule  // 引入 FormsModule  
  ],
})

如此，就可以消除这个错误，并可以看到 input 的栏位出现在你的画面中罗。
以下是画面结果

上面的动画中，就可以透过在 input 栏位绑上双向绑定的效果，动态地修改 hero.name 的内容。

Summary

这边做个总结

1. 可以透过在 input 栏位上加入双向绑定 [(ngModel)] 的功能，来动态地修改绑定属性的内容。
2. 要为 input 栏位绑上 [(ngModel)] 的功能的话，要在其所属的模组中引入 FormsModule ，才能成功在 input 栏位中绑上 [(ngModel)] 的功能。