如何为 [ngStyle] 设置动态 CSS 样式

Question

我正在寻找为 [ngStyle] 设置动态 css 从我的组件 ms-toolbar 我已将 html 设置为

<md-toolbar class="ms-toolbar" [ngStyle]="StylingToolbar">
</md-toolbar>

我已经从 ts 初始化为

    export class AppbarComponent {
     StylingToolbar = {
    'background-color': '00bcd4',
    'color':'white'
  };
}

但是在渲染时它不起作用。渲染时将元素设置为

<md-toolbar _ngcontent-alm-42="" class="ms-toolbar" ng-reflect-ng-style="[object Object]">

我使用的是 Angular 2.3.1 版

请建议一些更好的方法来做到这一点。

Answer 1

你所做的只是检查你的目标代码

色码前需加#

使用下面的代码

export class AppbarComponent {
     StylingToolbar = {
    'background-color': '#00bcd4',
    'color':'white'
  };
}