角2 ngModel不綁定對象屬性定義類定義

Question

我是新的角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 = {}; 

} 

此外，如果你看看你transpiled JS文件，你會看到類似這樣的：

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