Question

我遇到了Observables服务层调用的问题，我收到数据直到服务层，但没有传播到组件层，不知道出了什么问题。我在这里做错了吗？

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

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

1 个答案: