Template binding in angular 4

Question

Below is my partial component code

....

....
ngOnInit() 
{

this.service.getData().subscribe( function(data) {

    try 
    {
      console.log(JSON.stringify(data)); // {"name":"john"}
      this.ajaxdata = data;
}
catch(err) 
{
   console.log('Error Here....');
}

        });
}
....
....

and below is my partial template related code

{{ ajaxdata?.name }}  

console.log statement in the above code prints "{"name":"john"}" as expected. But {{ ajaxdata?.name }} does not print "john" , any idea what could be the reason ?

Answer 1

You have lost this context.

Solutions are attached below:

Way 1:

this.service.getData().subscribe( function(data) {
    try {
        console.log(JSON.stringify(data)); // {"name":"john"}
        this.ajaxdata = data;
    }
    catch(err) {
        console.log('Error Here....');
    }

}.bind(this))

Way 2:

this.service.getData().subscribe( (data) => {
        try {
            console.log(JSON.stringify(data)); // {"name":"john"}
            this.ajaxdata = data;
        }
        catch(err) {
            console.log('Error Here....');
        }

    })

It should resolve your issue.

Answer 2

It looks like you have lost the context of this.

In your code, this is currently not pointing to your class instance of ajaxdata. There are a couple of ways to fix this. The easiest of which I believe is to use an arrow function as below:

this.service.getData()
  .subscribe(data => this.ajaxdata = data)

More information on this can be found here

Answer 3

I think it is

{{ajaxdata.?name }}