使用内联CSS为组件设置样式 - Ionic2，AngularJS

Question

我正在尝试使用在constructor中设置的动态变量来添加background-image的内联CSS规则，代码如下：

<div style="background-image: url('{{backgroundImage}}');">
  ...
</div>

在我的组件中：

export class SomeComponent {

  backgroundImage = '';

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.backgroundImage = 'https://unsplash.it/200/300' ; }

}

然而，当该元素呈现到屏幕上时，内联CSS规则被省略。 我尝试使用Angular的ng-style，但返回“无法绑定到'div'的已知属性，因为它不是已知属性”。

我还尝试在@Component中设置styles，如此答案中所述，但在我的情况下无法实现，因为我需要backgroundImage变量是动态的。

- dimitry_n

Answer 1

自从Ionic2（或Ionic）基于Angular（而不是AngularJS）构建后，您可以像这样操作：

<div [ngStyle]="{ background: 'url(' + backgroundImage + ')' }"></div>

或者

<div [style.background]="'url(' + backgroundImage + ')'"></div>

- sebaferreras

---

第二个对我在Ionic 3上的工作方式是[style.borderColor] =“stat.color”，没有插值。谢谢。 - Ruffo

很高兴听到这个消息，@Ruffo :) - sebaferreras