Angular 2：self.context.data.style 未定义

Question

I am loading using a service to load my json data on the app component.

this.data = this.dataService.getData()
 .subscribe(
    data => {
     this.data = data;
     this.ui = this.data.style;
    },
    err => console.error(err),
    () => console.log('Data loaded')

 );

When I try to access this.ui in the template component for NgStyle, I get the error "Self.context.ui is undefined". Its strange because it shows in the console, but once I add it on my component, it freaks out.

This code is in the app component, I am trying to have dynamic styles from my json

<h1 [NgStyle]="{'color': ui.colors.first}"> Random text </h1>

Here is the json structure, it looks something like this.

{
 "style":{
   "colors": {
      "first": "#ffffff"
    }
  }
}

I don't really know why angular won't let me use the data, what do you think is happening here?

Answer 1

Your self.context error is here:

this.data = this.dataService.getData() 

should be just:

this.dataService.getData()
 .subscribe(
    data => {
     this.data = data;
     this.ui = this.data.style;
    },
    err => console.error(err),
    () => console.log('Data loaded')
 );

You are assigning data to this.data inside this.data so that's why it's complaining about self.context .

and [NgStyle] should be [ngStyle] and like @echonax suggested you might have to use safe operators.