Angular2 - 文本框输入标签上的 2 路绑定答案

【问题标题】：Angular2 - 2 way binding on text box input tagAngular2 - 文本框输入标签上的 2 路绑定
【发布时间】：2016-09-20 11:32:00
【问题描述】：

这对于 Angular 1 来说非常简单，但不知何故我无法让它与 Angular 2 一起使用。

假设在我的组件中，我有一个模型 - myModel.name.title，在它的构造函数中我设置了一些值，有一个文本类型的输入（下）在修改值的模板中：-

<input type="text" [(ngModel)]="myModel.name.title" />
<p>{{ myModel | json }}</p> //for previewing

但是，当我在文本框中输入内容时，预览中没有更新。此外，当我以编程方式更改模型时，文本框中没有任何变化。

我正在初始化它 -

@Component({})
export class .... {
   myModel: any;
   constructor(){
     this.myModel = {
        id: uniqid,
        name: {
          title: '',
          styles: {}
        }
   }
...
}

【问题讨论】：

标签： angular

【解决方案1】：

我认为您需要在包含您的输入的组件中以这种方式初始化 myModel 对象：

constructor() {
  this.myModel = {
    name: {}
  }
}

【讨论】：

我正在初始化它——就像在构造函数中这样——myModel = { id: uniqid, title: { string: '', styles: {} }, }
是的，但是name 有另一个层次，因为你使用myModel.name.title...
我得到了这个工作，有一些其他标签有问题，因此，它不能工作 - 因为在删除那些给出控制台错误的块后，它开始工作。跨度>