Question

我正在开展Ionic 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());
    });
  }
}

以下是有关上述运算符的一些解释：

map运算符：旨在将数据流中元素的值转换为其他值。请看这个链接：https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/select.md
do运算符：在不更改数据流的情况下强制触发操作。请看这个链接：https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/do.md。

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

Angular2。调用表单组件时，提供程序/服务功能未定义

1 个答案: