Angular：Observable，订阅不将数据返回到Component类

Question

I am having issues with Observables service layer invocation, I am getting data till the service layer but not propagating to component layer not sure what was wrong. Am I doing something wrong here?

In HelperUtils.ts (This is the same class for the 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);
 }

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

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

updated code below :

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

Service layer

    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

On your getDNS() method, you are assigning the result of the getResource call to `this.result, but you are not returning the result itself as an observable.:

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

From the code in your component I see that you are doing the API call to receive an array of objects of type DNS . What you need to do in this case is map the result of the call to DNS[] and subscribe to it from the component. Something like this:

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

Finally, on your component:

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