Angular2对象未定义

Question

在访问Service Component的对象时获取"object undefined"但是硬编码下面的数据到javaScript变量工作良好，并显示对象类型"object Array"

Data.json

[
      {
        "id": 1,
        "name": "Malad",
        "gateway": "10.10.100.1",
        "device": "cisco"
      }, {
        "id": 2,
        "name": "Kandhivali",
        "gateway": "222.30.100.1",
        "device": "Juniper"
      }
]

DataService.ts

import {Injectable} from 'angular2/angular2'
import {Http} from 'angular2/http';
@Injectable()
export class DataService {
  tdata = [
  {
    "id": 1,
    "name": "Malad",
    "gateway": "10.10.100.1",
    "device": "cisco"
  }, {
    "id": 2,
    "name": "Kandhivali",
    "gateway": "222.30.100.1",
    "device": "Juniper"
  }
];
  data;
  constructor(http: Http){
    http.get('Data.json')
    .toRx()
    .map(res => res.json())
    .subscribe(res => this.data= res);
  }
}

DataPage.ts

import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
import {DataService} from './DataService'
@Component({
  selector: 'DataPage'
})
@View({
  template: `
{{data | json}}  //Working //object Array
<br>
{{data | json}}  //Not Wokring // object Undefined //No data :(
`

directives: [CORE_DIRECTIVES]
})
export class DataPage{
  query;
  tquery;
    constructor( public dataService:DataService){
       this.query = dataService.data; // object Undefined
       this.tquery = dataService.tdata; //object Array
  }
}

Answer 1

这是因为您正在异步获取data。你不能指望服务在你调用它的时候返回这个值，所以你应该在你的服务中返回这个Observable，并在你的组件中订阅它。

为您服务

constructor(http: Http){
    this.http = http;
}
myData() {
  return this.http.get('Data.json')
     .toRx()
     .map(res => res.json());
}

组件

constructor( public dataService:DataService){
       dataService.myData().subscribe(res => this.query = res);
       this.tquery = dataService.tdata; //object Array
  }

并将视图更改为

@View({
    template: `
     {{tquery| json}}
     <br>
     {{query | json}}
    `

这里有一个副本:http://plnkr.co/edit/BeMpYR?p=preview