Angular2 Object Undefined

Question

Получение «объекта undefined» при доступе к объекту Сервисного компонента. Но жёстко ниже данных переменной JavaScript работает нормально и показывает объект типа "объект 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