Angular2 对象未定义

Question

访问服务组件的对象时获取 "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。你不能期望服务在你调用它时 return 值，所以你应该 return 在你的服务中的 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

Angular2 对象未定义

Angular2 Object Undefined

typescript

angular