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

Posted 2023-03-06

【中文标题】如何为 [ngStyle] 设置动态 CSS 样式

【英文标题】：how to set dynamic css style for [ngStyle]

【发布时间】：2017-07-16 23:42:36

【问题描述】：

我正在寻找为 [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 版

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

【问题讨论】：

Dynamically updating css in Angular 2的可能重复

我想要什么设置对象，该对象具有 ts 文件中的 css 属性，正如我所描述的那样，称为 [ngStyle]

【参考方案1】：

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

色码前需加#

使用下面的代码

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