Angular2 http get json issue

Question

Попытка отобразить ответ http json в угловом представлении. Чтобы начать работу, я закончил специальный учебник для ядра .NET и Angular2 с помощью TypScript. Все работало нормально, поэтому я попытался немного изменить его, но, похоже, я застрял и не могу найти ответ. Это то, что у меня есть до сих пор.

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 не отображает данные. Ошибка:

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

Пробовал много способов. Доступ к массиву с данными индекса [0] .Id, изменение типов переменных, ничего. Также этот console.log (json) отлично работает. Я могу видеть и читать объект в консоли, но другой console.log (this.data) показывает undefined, и я ожидаю, что он будет таким же. Что мне не хватает?

Answer 1

В режиме просмотра CD, data.Id интерполяция пытается оценить, но data объект еще не определен. Поэтому, когда он попытался получить доступ к свойству Id, он выдаст ошибку.

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

Другое дело, я хотел бы отметить, там никакого смысла не имеют wall элемент снова, как вы уже рендеринга wall компонент. (Я знаю, что это не сработает, потому что мы не предоставили она внутри directives опции Component)