角度2。 Provider/Service调用表单组件时未定义函数

Angular2. Provider/Service function is undefined when called form component

我正在做一个 Ionic 2 项目。

这是 provider/service,我在其中向本地 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;
  }
}

以及组件的导出 class : returns 在控制台中未定义

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()) 时,控制台中的所有内容都输出得很好。

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

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

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

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