Angular2 - 订阅不触发服务调用

Question

我有一个组件订阅服务中的observable。但是订阅不会触发服务中的获取。这里是我的服务....

import { Injectable } from '@angular/core'; 
    import { IMeasureRating } from './measureRating'; 
    import { IRating } from './rating'; 
    import { IMeasure } from './measure'; 
    import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http'; 
    import { ErrorHandler } from '../error-handler/error-handler.component'; 
    import { Observable } from 'rxjs/Rx'; 
    import 'rxjs/add/operator/map'; 
    import 'rxjs/add/operator/do'; 
    import 'rxjs/add/operator/catch'; 


    declare function require(name: string); 

    @Injectable(
    ) 

export class MeasureRatingService{ 
    private _ratingURL = 'http://localhost:54255/api/MeasureRating/'; 

    errorMessage: string = ''; 

    constructor(private _http: Http, private _errorHandler: ErrorHandler) { 
    }  
     getMeasureNames(): Observable<IMeasure[]> { 

      let headers = new Headers(); 
      headers.append('Content-Type', 'application/json'); 

      let options = new RequestOptions({ headers: headers }); 

      return this._http.get(this._ratingURL + "getMeasureNames", { headers: headers }) 
       .map((response: Response) => <IMeasure[]>response.json()) 
       .do(data => console.log("MR getMeasureNames: " + JSON.stringify(data))) 
       .catch(this.handleError) 
     } 

，这里是正在试图利用它的分量码...

@Component({ 
    selector: 'measureRatings', 
    template: require('./measureRating.component.html') 
}) 
. 
. 
. 
export class measureRatingComponent implements OnInit { 
. 
. 
. 
    constructor(private _MRService: MeasureRatingService, private _router: Router) { 

    } 

. 
. 

    buildDefaults() 
    { 
     this.defaultMeasureNames = []; 
     this._MRService.getMeasureNames() 
      .subscribe(x => this.defaultMeasureNames = x, 
      error => this.errorMessage = <any>error, 
      () => { this.buildDefaultRatingArray() }); 
    } 

我敢肯定有唯一的一个实例服务运行。它出现的唯一地方是在组件模块的提供者部分。 BuildDefaults（）从组件的ngOnChanges被调用。有什么想法吗？

在此先感谢。

Answer 1

你还没有使用“return”来返回response.json（）在服务中的响应。 还要在组件中添加服务提供者类。

尝试使用下面的代码片段。

Service.ts

@Injectable() 

export class MeasureRatingService{ 
    private _ratingURL = 'http://localhost:54255/api/MeasureRating/'; 
    errorMessage: string = ''; 

    constructor(private jsonp: Jsonp, private _http: Http, 
       private _errorHandler: ErrorHandler) { 
    }  

    getMeasureNames(): Observable<IMeasure[]> { 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     let options = new RequestOptions({ headers: headers }); 

     return this._http.get(this._ratingURL + "getMeasureNames", options) 
      .map((response: Response) => { 
        return <IMeasure[]>response.json(); 
      }) 
      .catch(this.handleError); 
    } 

    private handleError(error: Response) { 
    console.error(error); 
    return Observable.throw(error.json().error || ' error'); 
    } 
} 

component.ts

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { Service } from '../shared/services/service'; 

@Component({ 
    selector: 'measureRatings', 
    template: require('./measureRating.component.html'), 
    providers: [Service] 
}) 

export class measureRatingComponent implements OnInit { 
    constructor(private _MRService: MeasureRatingService, 
       private _router: Router) { 
    } 

. 
. 

    buildDefaults() 
    { 
     this.defaultMeasureNames = []; 
     this._MRService.getMeasureNames() 
      .subscribe((data: any) => { 
        this.defaultMeasureNames = data; 
      },     
      error => {this.errorMessage = <any>error}, 
      () => { this.buildDefaultRatingArray() } 
      ); 
    } 

希望这会帮助你。