Angular 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')

 );

当我尝试在 NgStyle 的模板组件中访问 this.ui 时，我收到错误“Self.context.ui 未定义”。这很奇怪，因为它显示在控制台中，但是一旦我将它添加到我的组件中，它就吓坏了。

此代码在应用程序组件中，我正在尝试从我的 json 中获取动态样式

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

这是json结构，看起来是这样的。

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

我真的不知道为什么 Angular 不让我使用数据，你认为这里发生了什么？

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 建议的那样，您可能必须使用安全运算符。