Angular2 http get json issue

Question

Trying to display http json response in angular2 view. To get started, I finished a special tutorial for the .NET kernel and angular2 using Typescript. Everything worked fine, so I tried to change it a bit, but it looks like I'm stuck and can't find the answer. This is what I still have.

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. Error:

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

I tried many ways. Access to the array with index data [0] .Id, changing the types of variables, nothing. Also this console.log (json) works fine. I see and read an object in the console, but another console.log (this.data) shows undefined, which I would expect to be the same. What am I missing?

Answer 1

In CD view, data.Id tries to evaluate, but the data object is not yet defined. Therefore, when he tried to access the Id property, he throws an error.

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

Another thing that I would like to note is that it makes no sense to have the wall element again, since you already represent the wall component (I know that this will not work, because we did not provide it inside the directives Component option)