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

Question

我正在做一个 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()) 时，控制台中的所有内容都输出得很好。

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

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

map运算符：旨在将数据流中元素的值转换成其他的东西。看到这个 link：https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/select.md
do运算符：在不改变数据流的情况下强制触发一个动作。看到这个 link：https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/do.md.

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

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

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

angular

ionic2

angular2-directives

angular2-services