Angular2无法从Service获取模拟数据

时间:2016-04-06 11:40:21

标签: angular

更新:抱歉,我复制了错误版本的代码:我现在在服务中调用了then,如图所示。

我正在创建一个提供模拟数据的服务(遵循与here类似的结构)但由于某种原因无法获取数据。

来自AppComponent的

片段

export class AppComponent implements OnInit{
  ngOnInit(){
    this.getData();
  }


  constructor(private _dataService: DataService){ }

  getData(){
      console.log('get data called');
      var data = this._dataService.getData();
      console.log('data type is '+typeof(data));
      console.log('data key is ');
      for(var k in data){
        console.log(k);
      }

DataService如下:

import {Injectable} from 'angular2/core';
import {MOCK_DATA} from './mock-data';

@Injectable()
export class DataService{
  getData(){
    return Promise.resolve(MOCK_DATA).then(data => data);
  }
}

模拟数据是:

export var MOCK_DATA = {
  "apple": [
    {"taste": "apple", "really": false},
    {"taste": "random", "really": true},
  ],
  "orange": [
    {"taste": "orange", "really": false},
    {"taste": "random", "really": true},
  ],
}

但是console.log结果是:

get data called
app.component.ts:46 data type object
app.component.ts:47 data key 
app.component.ts:49 __zone_symbol__state
app.component.ts:49 __zone_symbol__value
app.component.ts:49 then
app.component.ts:49 catch

2 个答案:

答案 0 :(得分:1)

您需要通过then方法调用返回的承诺上的getData方法才能接收数据:

getData() {
  console.log('get data called');
  this._dataService.getData().then(data => {
    // Handle the data

    // For example
    console.log('data type is '+typeof(data));
    console.log('data key is ');
    for(var k in data){
      console.log(k);
    }
  });
}

then方法必须在组件中使用,而不是在服务中使用。

您的服务应该是:

@Injectable()
export class RBACService{
  getData(){
    return Promise.resolve(MOCK_DATA);
  }
}

而不是

@Injectable()
export class RBACService{
  getData(){
    return Promise.resolve(MOCK_DATA).then(data => data);
  }
}

答案 1 :(得分:1)

我认为你在AppComponent的装饰器中缺少代码的一些重要部分,如下所示:

import { Component, OnInit } from 'angular2/core';
import { RBACService } from './(serviceName).service';

@Component({
    selector: 'my-app',
    template: `whatever...`,
    providers: [RBACService]
})
export class AppComponent implements OnInit {

其中(serviceName)应该是您的inyectable服务的文件名,而因为DataService而在构造函数中将其视为,并且它实际上被称为RBACService {1}} ...