Angular2.Provider/Service函数在调用表单组件时未定义

Question

我正在做一个离子2项目。

这是我向本地API发出请求的提供者/服务...

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ServiceTest {
  // data: any = null;
  public data;

  constructor(public http: Http) {
    this.http = http;
    this.data = null;
  }

  retrieveData(){
    this.http.get('http://localhost:3000/people')
    .subscribe(res => {
      return this.data = res.text();
      // console.log(this.data);
    })
  }

  getData(){
    return this.data;
  }
}

组件的导出类:在控制台中返回undefined

export class Page1 {
  constructor(public data:ServiceTest) {
    this.data = data;
    console.log(this.data.retrieveData());
    console.log(this.data.getData());
  }
}

事情是这样的，当我从服务中执行console.log(this.data.text())时，一切都在控制台中正常输出。

Answer 1

您的数据是异步加载的。所以我会这样更新您的代码：

@Injectable()
export class ServiceTest {
  (...)

  retrieveData(){
    return this.http.get('http://localhost:3000/people')
      .map(res => res.text())
      .do(data => {
        this.data = data;
      });
  }

在您的组件中：

export class Page1 {
  constructor(public data:ServiceTest) {
    this.data.retrieveData().subscribe(data => {
      console.log(data);
      console.log(this.data.getData());
    });
  }
}

以下是关于上面使用的运算符的一些解释:

< li> map运算符:旨在将数据流中元素的值转换为其他值。见此链接:https://github . com/Reactive-Extensions/RxJS/blob/master/doc/API/core/operators/select . MD < li> do运算符:强制触发操作，而不更改数据流。请参见此链接:https://github . com/Reactive-Extensions/RxJS/blob/master/doc/API/core/operators/do . MD。

预订方法用于接收数据流上的结果/事件或错误/完成。