如何使用 Angular2 中的可观察对象更新 class

Question

我的问题很简单。我有一项研究class。我想（当我点击一个按钮时）将此 class 更改为另一项研究。所以我创建了一个 observable，它给我 class（通过 .json）。但是当我订阅这个 observable 时，通过我的函数 'getStudy' 我的 class 研究发生了变化，但不会显示 {{study.name}}.

我的studies.component

import {StudiesListService} from '../_services/studieslist.service';
import {studiesList} from '../_models/studiesList';
import {Observable} from 'rxjs/Rx';
import {HttpModule} from '@angular/http';
import {Study} from '../_models/study';
import {StudyProvider} from '../_services/studyprovider.service';
@Component({
  moduleId: module.id,
  selector: 'studiescomponent',
  templateUrl: 'studies.component.html',
})


export class StudiesComponent {
  studyName : string = "test"
  public study : Study = { name: 'test'} ;
  studieslist : studiesList;

  constructor(private _studiesListService : StudiesListService,
              private _studyProvider : StudyProvider ){
  }

 ngOnInit(){
    this._studiesListService.getStudiesListfromAPI()
                            .subscribe( res => this.studieslist =res,
                                        err => console.error(err.status)
     );
}

getStudy(studyName : string){
    this._studyProvider.getStudyfromAPI(studyName)
     .subscribe( res => this.study=res,
                 err => console.error(err.status));

  }
}

请注意，StudiesListService 为我提供了研究列表。

这是我的 studyProvider.service

import {Injectable} from '@angular/core';
import {Http} from '@angular/http'
import {Study} from '../_models/study'
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do'
@Injectable()

export class StudyProvider{
  public data : Object;
  constructor(private _http:Http){

 }
  getStudyfromAPI(studyname : string){
    var path : string = '../CDN/';
    path = path.concat(studyname);
    path = path.concat('.json');
    return this._http.get(path)
      .do( x => console.log(x))
      .map( res =>res.json())
  }
}

Answer 1

getStudyfromApi 方法返回一个数组。所以我只需要在 study.component

中更改它

 this._studyProvider.getStudyfromAPI(studyName)
     .subscribe( res => this.study=res,
                 err => console.error(err.status));

来自

this._studyProvider.getStudyfromAPI(studyName)
     .subscribe( res => this.study=res[0],
                 err => console.error(err.status));

一切正常感谢@AhmedMusallam 的回答

如何使用 Angular2 中的可观察对象更新 class

How to update a class with an observable in Angular2

angular

observable

angular2-observables