Angular 2 ngModel 未绑定类定义中定义的对象属性

Question

我是 angular 2 的新手，我尝试了 [(ngModel)] ，如下所示。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<input [(ngModel)]="model.name" name="name"> <h1>{{model.name}}</h1>`
})
export class AppComponent  { 
constructor() {
}
model = {name: "some value"};
}

上面的代码在浏览器中初始加载网页时产生如下所示的输出..

第二个是..

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<input [(ngModel)]="model.name" name="name"> <h1>{{model.name}}</h1>`
})
export class AppComponent  { 
constructor() {
}
model = {};
model.name = "some value";
}

这个产生以下输出..

请解释两个代码示例之间的区别以及为什么它在第二个示例中不起作用。

提前致谢。

Answer 1

因为你不能在那里做作业。您可以将赋值移至构造函数或任何其他生命周期方法中：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<input [(ngModel)]="model.name" name="name"> <h1>{{model.name}}</h1>`
})
export class AppComponent  { 
constructor() {
   this.model.name = "some value";
}
model = {};

}

另外，如果你查看转换后的 js 文件，你会看到类似以下内容：

function AppComponent() {
      this.model = {};
      this.name = "some value";
}