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

Question

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?

Stefan Svrkota · Accepted Answer · 2016-11-02 20:17:10Z

3

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.

answered Nov 2, 2016 at 20:17

Stefan Svrkota

50.8k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Over a year ago

Wow... Such a simple thing but a huge effect. I used your first example and all is now awesome. Thanks a lot for this!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related