Angular 2 ngModel 未绑定对象属性在 Class 定义中定义

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

Angular 2 ngModel 未绑定对象属性在 Class 定义中定义

Angular 2 ngModel Not Binding Object Property Defined In Class Definition

javascript

typescript

angular2-ngmodel

angular

Angular 2 ngModel 未绑定对象 属性 在 Class 定义中定义

Angular 2 ngModel Not Binding Object Property Defined In Class Definition

javascript

typescript

angular2-ngmodel

angular

Angular 2 ngModel 未绑定对象属性在 Class 定义中定义