Angular2 http get json issue

Question

Cercando di visualizzare la risposta del json http nella vista angular2. Per iniziare, ho completato un'esercitazione specifica per .NET core e Angular2 con Typescript. Tutto ha funzionato bene, quindi ho provato a modificarlo un po ', ma sembra che mi sono bloccato e non riesco a trovare la risposta. Questo è quello che ho finora.

wall.main.component.ts

import {Component, OnInit} from "angular2/core"; 
import {CORE_DIRECTIVES} from "angular2/src/common/directives/core_directives"; 
import {WallService} from "./wall.service"; 

@Component({ 
    selector: "wall", 
    templateUrl: "app/components/wall/wall.main.html", 
    providers: [WallService], 
    directives: CORE_DIRECTIVES 
}) 
export class WallComponent implements OnInit { 
    data: any; 

    constructor(private service: WallService) { } 

    ngOnInit() { 
     this.get(); 
     console.log(this.data); 
    } 

    get() { 
     this.service.get().subscribe((json: any) => { 
      console.log(json); 
      this.data = json; 
     }); 
    } 
} 

wall.service.ts

import "rxjs/Rx" 
import {Http} from "angular2/http"; 
import {Injectable} from "angular2/core"; 

@Injectable() 
export class WallService { 
    constructor(private http: Http) { } 

    get() { 
     return this.http.get("wall/getwallposts").map(response => response.json()); 
    } 
} 

wall.main.html

<wall> 
    <p>{{data.Id}}</p> 
    <p>{{data.Body}}</p> 
</wall> 

Html non visualizza i dati. L'errore:

TypeError: Cannot read property 'Id' of undefined in [{{data.Id}} in WallComponent@3:7] 

Provato un sacco di modi. Accesso come array con i dati dell'indice [0] .Id, modifica dei tipi di variabile, nulla. Anche questo console.log (json) funziona bene. Posso vedere e leggere l'oggetto nella console, ma l'altro console.log (this.data) mostra undefined, che mi aspetterei sia lo stesso. Cosa mi manca?

Answer 1

In visualizzazione all'avvio del CD, l'interpolazione data.Id tenta di valutare, ma l'oggetto data non è ancora stato definito. Quindi, quando ha provato ad accedere alla proprietà Id da esso, genera un errore.

<wall> 
    <p>{{data?.Id}}</p> 
    <p>{{data?.Body}}</p> 
</wall> 

Altra cosa che ho voluto sottolineare è, non v'è alcun senso di avere ancora una volta wall elemento, come si è già il rendering di una componente wall. (So che non funzionera ', perché non abbiamo fornito all'interno directives possibilità di Component)