Angular：Observable，訂閱不返回數據到組件類

Question

我遇到了Observable服務層調用的問題，我得到的數據直到服務層，但沒有傳播到組件層不知道什麼是錯的。我在這裏做錯了什麼？

在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') 
     ); 
    } 

在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') 
      ); 

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

個

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

在您getDNS()方法，你分配getResource調用`this.result的結果，而不必返回結果本身作爲一個可觀察：

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

從組件中的代碼我看到您正在進行API調用以接收DNS類型的對象數組。在這種情況下，您需要做的是將調用的結果映射到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));