双向数据绑定 - ngModel

Question

在下面的angular2组件中，

export class HomeComponent implements OnInit {
  homeTitle = "Welcome to the home page";
  myString = "I like red";
  myBoolean = false;

  alertMe(val){
    alert(val);
  }

  obj = {
    name: "Yoshi",
    belt: "Black"
  };

  constructor() { }

  ngOnInit() {
  }

}

双向数据绑定不适用于以下视图，

<p>
  {{homeTitle}}
</p>

<!--  Property binding -->

<!-- input value="Hai" -->
<input [value]="myString">
<input [required]="myBoolean">

<button (click)="alertMe('I like x')">Click me</button>

<hr>
<!-- All above elements are working fine -->

<!-- 2 way data binding -->
<input [(ngModel)]="obj.name">
<p>{{obj.name}}</p>
<p>{{obj.belt}}</p>

为什么 obj.name 不在输入元素中呈现？

Answer 1

抱歉，我现在看到了。您必须在输入中指定 name="myModelName"：

喜欢<input name="myModelName" [(ngModel)]="obj.name">

Answer 2

在您的模块中只需添加 FormsModule

import { FormsModule } from '@angular/forms';
imports: [
  ..
  FormsModule
]

双向数据绑定 - ngModel

Two way data binding - ngModel

angular2-forms

angular2-template

angular