Eric Eric - 1 month ago 11
HTTP Question

Angular 2 (TypeScript): Unable to bind to object from http.get in HTML Template

Having a devil of a time figuring out why this is happening. I've got an A2 project set up using the CLI and I have the following component:

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
selector: 'app-user-profile-card',
templateUrl: 'user-profile-card.component.html',
styleUrls: ['user-profile-card.component.scss']
})
export class UserProfileCardComponent implements OnInit {

public person;

constructor(private http: Http) {
}

getUserProfile(){
this.http.get('http://somedomain.com/12345')
.map(res => res.json())
.subscribe(
person => { this.person = person.person },
err => console.error(err),
() => console.log(this.person.sex)
);
}

ngOnInit() {
this.getUserProfile();
}
}


The console log for this.person.sex shows the correct value, but when I try to bind to it from the template:

<div>{{ person.sex }}</div>


I get the following error:


undefined is not an object (evaluating 'self.context.person.sex')


Any ideas on this?

Answer

That's because all http calls are asynchronous operations and you are trying to display person.sex in your template before data arrive. You can use safe navigation operator (?) to "protect" your template until data arrive:

<div>
    {{ person?.sex }}
</div>

You can also use ngIf directive:

<div *ngIf="person">
    {{ person.sex }}
</div>

This way, your div won't appear in DOM until variable person is populated. You can read more about safe navigation operator here and more about ngIf directive here.

Comments