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

Javascript Angular 2 ngModel未绑定类定义中定义的对象属性,javascript,angular,typescript,angular2-ngmodel,Javascript,Angular,Typescript,Angular2 Ngmodel,我是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 { c

我是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"};
}
从'@angular/core'导入{Component};
@组成部分({
选择器:“我的应用程序”,
模板:`{model.name}}`
})
导出类AppComponent{
构造函数(){
}
模型={name:“某个值”};
}
上述代码在浏览器中初始加载网页时生成如下所示的输出

第二个是

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";
}
从'@angular/core'导入{Component};
@组成部分({
选择器:“我的应用程序”,
模板:`{model.name}}`
})
导出类AppComponent{
构造函数(){
}
模型={};
model.name=“某些值”;
}
这一个产生以下输出

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


提前谢谢。

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

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 = {};

}

为什么我不能在那里做作业?若我不能在那个里做赋值,那个么我们怎么能把{}赋值给模型呢?请向我澄清。。感谢您的回答,您不能在类的顶层使用任意代码。只允许属性和方法声明。代码必须进入构造函数或方法。@shivaraj您没有将{}分配给模型,而是在那里创建了一个对象。然后您尝试更改您创建的对象的属性。谢谢,但回答中提到的代码是合法的。。?我之所以问这个问题,是因为如果我用npm run tsc编译它,它会用app/app.component.ts失败(9,12):错误TS2339:类型“{}”上不存在属性“name”。但是在运行npm运行tsc:w时成功编译了?为什么?谢谢你的帮助@GünterZöchbauer@echonax
function AppComponent() {
      this.model = {};
      this.name = "some value";
}