javascript - Angular 2 ngModel不绑定(bind)类定义中定义的对象属性

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";
}