Angular2 http get json issue

Question

Trying to display http json response in angular2 view. To get me started I have completed a specific tutorial for .NET core and Angular2 with Typescript. Everything worked fine, so I tried to modify it a bit but it looks I got stuck and can not find the answer. This is what I have so far.

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 does not display data. The error:

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

Tried a lot of ways. Accessing as an array with the index data[0].Id, changing variable types, nothing. Also this console.log(json) works fine. I can see and read the object in the console, but the other one console.log(this.data) shows undefined, which I would expect to be the same. What am I missing?

Answer 1

On view when CD started, data.Id interpolation tries to evaluate, but data object isn't defined yet. So when it tried to access Id property from it, it throw an error.

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

Other thing I wanted to point out is, there is no meaning to have wall element again, as you are already rendering a wall component.(I know it is not gonna work, because we haven't provided it inside directives option of Component)