Angular 2 在变量值更改后不刷新 View ？

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(); 
     }

}

我想要的是从 UserDataService 的配置文件中导入数据，如下所示:

  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，但问题是 View 没有像我想象的那样刷新。我显然不了解情况，所以有人可以帮助我吗？

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 而不是 Subscription允许调用者在数据到达时得到通知。

如果您想在调用站点上使用结果，请添加实际的返回:

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