双向数据绑定 - ngModel

时间:2017-11-15 14:35:34

标签: angular angular2-template angular2-forms

在下面的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不会在输入元素中呈现?

2 个答案:

答案 0 :(得分:2)

您的模块中的

只需添加<IfModule mod_rewrite.c> Options -MultiViews RewriteEngine On RewriteRule ^ index.php [QSA,L] RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{SERVER_PORT} 80 RewriteCond %{HTTP_HOST} ^website\.com [NC] RewriteRule ^(.*)$ https://website.com/$1 [L,R=301] RewriteCond %{HTTP_HOST} ^www.website.com$ RewriteRule (.*) https://website.com/$1 [R=301,L] </IfModule>

FormsModule

答案 1 :(得分:0)

抱歉,我现在看到了..你必须在输入中指定name="myModelName"

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