代码之家 › 专栏 › 技术社区 › overexchange

双向数据绑定-ngModel

angular2-forms angular2-template angular

overexchange · 技术社区 · 7 年前

在下面的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 回复 | 直到 7 年前

Mohamed Ali RACHID 7 年前

在您的模块中,只需添加 FormsModule

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

Luca Taccagni 7 年前

对不起,我现在看到了。。您必须指定 name="myModelName" 输入中:

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

推荐文章

Alan Choufa · 无赋值的角度属性绑定

2 年前

Karl Johan Vallner · 如何将datatable寻呼机模板添加到Angular ngx datatable

6 年前

lpd · 在Angular 2中使用外部JavaScript文件

6 年前

dEs12ZER · ng select in ANGLAR5问题:错误类型错误:对象(…)不是NgDropdownPanelComponent上的函数。ngOnInit(ng-select.js

6 年前

Sudharsan Venkatraj · 如何在Angular2中发布图像?

6 年前

Ritesh Puri · @角度2中的输入和@输出功能不正常

6 年前

SamuraiJack · Angular 2中处理双向数据绑定时如何处理null变量+

6 年前

user4422315 · 模板分析错误-角度5

6 年前

Nagendra Devara · 如何通过ngOnInit禁用下拉列表中的选项?

6 年前

Avtandil Kavrelishvili · 如何在angular 2中通过fa fa minus和fa fa plus图标动态更改显示/隐藏div

6 年前