Angular 2在變量值更改後不刷新視圖？

Question

所以，我一直在尋找答案的最後兩個小時拉我的頭髮。 我有一個簡單AppComponent這樣的：

import {Component, OnInit} from '@angular/core'; 
import {UserDataService} from '../services/user-data.service'; 

@Component({ 
selector: 'myapp', 
template: ` 
<h1>Angular 2 app inside a desktop app</h1> 
<div *ngIf="data"> 
    {{data}} 
</div> 
`, 
}) 

export class AppComponent{ 
    public data : Object; 

    constructor(private userDataService : UserDataService) {} 

    ngOnInit(){ 
     this.data=this.userDataService.getUserData(); 
    } 

} 

我想是從使用者資料的配置文件，它看起來像這樣導入數據：

import {Injectable} from '@angular/core'; 
    import {Http,Response} from '@angular/http'; 
    import {Observable} from 'rxjs/Rx'; 

    @Injectable() 
    export class UserDataService{ 
    public data : Object; 

    constructor(private http : Http){} 

    getUserData(){ 
     this.http.get('./config.json').map((res:Response)=>res.json()) 
     .subscribe(data => {this.data = data}); 

    return this.data; 
    } 

}

我想檢查該配置文件中是否存在某個變量，如果有，我想顯示div，但問題是該視圖不像我想象的那樣刷新。我顯然沒有把握這種情況，任何人都可以幫助我？

Answer 1

異步處理有點不同。

export class AppComponent { 
    public data : Object; 

    constructor(private userDataService : UserDataService) {} 

    ngOnInit() { 
     // subscribe and assign result when it arrives to `this.data` 
     this.userDataService.getUserData().subscribe(data => this.data = data); 
    } 

} 

使用.map()而不是subscribe()這樣一個Observable是reaturned代替Subscription允許當數據到達時獲得通知調用者。

getUserData() { 
    return this.http.get('./config.json') 
    .map((res:Response)=>res.json()) 
// .map(data => {this.data = data}); 
}