角度：観測可能、コンポーネントクラスにデータを返さないで購読する

Question

Observablesサービスレイヤの呼び出しに問題があります。サービスレイヤまでデータを取得していますが、何が間違っているかわからないコンポーネントレイヤに伝播しません。私はここで何か間違っていますか？ DNSComponent.ts

result: Dns[]; 
this.dnsSvc 
       .getDNS() 
       .subscribe(
        res => { 
         console.log('In component result class:===>' + res); 
         this.result = res; 
         console.log('In component class:===>' + this.result); 
        }, 
       // make sure you get data here. 
       // console.log('Data from API layer', +res); 
        error => console.log('Error from backend API', +error), 
      () => console.log('Done') 
      ); 

で

HelperUtils.tsで

（これは、HTTP REST APIの同じクラスである）

getResource(url: string): Observable<any[]> { 
     this.headers.set('token', token); 
     this.options = new RequestOptions({ headers: this.headers }); 
     console.log('URL at HttpUtils', this.getServer() + url); 
     console.log('Options at HttpUtils', this.options); 
     return this.http 
      .get(this.getServer() + url, this.options) 
      .map(this.retrieveData) 
      .catch(this.handleException); 
} 

DNSService.tsで

getDNS(): Observable<Dns[]> { 
     return this.helperUtils 
      .getResource('databases') 
      .subscribe(
       res => this.data = res, 
        // make sure you get data here. 
        // console.log('Data from Service API layer', this.data), 
       error => console.log('Error from backend API', +error), 
       () => console.log('Done') 
     ); 
    } 

DNSModel.ts

export class Dns { 
    public dnsname: string; 
} 

以下更新されたコード：

model.ts

export class Dns { 
    public dnsname: string; 
} 

helperUtils.ts

// - Simply return the observable of the call 
    getResource(url: string): Observable<Response> { 
     this.headers.set('Api_key', api_key); 
     this.options = new RequestOptions({ headers: this.headers }); 
     console.log('URL at HelperUtils', this.getServer() + url); 
     console.log('Options at HelperUtils', this.options); 
     return this.http.get(this.getServer() + url, this.options); 
    } 

サービス層

data: Dns[]; 
// Subscribe to the result and do the Mapping. 
    getDNS(): Observable<Dns[]> { 
     return this.httpUtils.getResource('databases') 
      .map(res => { 
       if (res.ok) { 
        let body = this.retrieveData(res); 
        return body.map(x => new Dns()); 
       } 
      // console.log('Issue with the response'); 
      } 
     ); 
    } 
    private retrieveData(res: Response) { 
     console.log('Response at httpService -', res.json()); 
     let body = res.json(); 
     console.log('Response at httpService res body-', body); 
     return body; 
    } 

あなたのgetDNS()方法で

Component.ts

result: Dns[]; 

ngOnInit() { 

     this.instanceDetailsSvc.getDNS() 
      .map(res => { 
       this.result = res; 
      }, 
      error => console.log('Error from backend API', +error) 
     ); 
      console.log('The Result Is:::::' + this.result); 
} 

Answer 1

、あなたはthis.result `へgetResource呼び出しの結果を代入されますが、観測可能：

として結果そのものを返すされていません

getDNS(): Observable<Dns[]> { 
    return this.helperUtils 
     .getResource('databases') 
     .subscribe(
      res => this.data = res, // <= HERE 
      error => console.log('Error from backend API', +error), 
      () => console.log('Done') 
    ); 
} 

コンポーネントのコードから、DNSのオブジェクトの配列を受け取るAPI呼び出しを行っていることがわかります。この場合、あなたは呼び出しの結果をDNS[]にマップし、それをコンポーネントからサブスクライブします。

//- Simply return the observable of the call 
getResource(url: string): Observable<any[]> { 
    this.headers.set('token', token); 
    this.options = new RequestOptions({ headers: this.headers }); 
    return this.http.get(this.getServer() + url, this.options); 
} 

...

最後に

// Subscribe to the result and do the Mapping. 
getDNS(): Observable<Dns[]> { 
    return this.helperUtils.getResource('databases') 
      .map(res => { 
        if (res.ok) { 
         // do mapping logic here, i.e. 
         return res.json.map(x => new DNS(x)); 
        } 
        else { 
         //handle invalid result 
        } 
      } 
    ); 
} 

、コンポーネント上：このような何か

this.dnsSvc.getDNS() 
    .subscribe(res => { 
      this.result = res; 
    }, 
    error => console.log('Error from backend API', +error));