Угловое 2: self.context.data.style неопределен

Question

Я загрузки с помощью службы, чтобы загрузить свои данные JSon на компоненте приложения.

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

); 

Когда я пытаюсь получить доступ к this.ui в компоненте шаблона для NgStyle, я получаю ошибку «Self.context.ui не определено». Это странно, потому что оно отображается в консоли, но как только я добавляю его на свой компонент, он волнуется.

Этот код в компоненте приложения, я пытаюсь иметь динамические стили из моей JSON

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

Здесь структура JSON, это выглядит примерно так.

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

Я действительно не знаю, почему угловые не позволяют мне использовать данные, как вы думаете, что происходит здесь?

Answer 1

Ваша ошибка self.context здесь:

this.data = this.dataService.getData() 

должно быть просто:

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

Вы назначаете данные в this.data внутри this.data так вот почему он жалуется self.context.

и [NgStyle] должно быть [ngStyle] и, как @echonax, предположили, что вам, возможно, придется использовать безопасных операторов.