用于多种样式的 Angular ngStyle

Question

我正在研究一个简单的 animation library我的用户可以使用属性绑定(bind)修改我的组件，到目前为止，我一直在执行以下操作来应用他们的选择:

<div [style.background]="color" [style.width.px]="width" [style.height.px]="height"></div>

但对于 future 的添加，我希望用 [ngStyle]="styleObject" 来改变这整个困惑局面。为了简化添加更多属性，我正在尝试这样实现:

@Input() width: number;
@Input() height: number;

public styleObject: Object = {
    'height': this.height,
    'width': this.width
};

但出于某种原因<div [ngStyle]="styleObject"></div>没有考虑上面显示的样式。

请注意添加+ 'px'和做height.px没有解决我的问题。

我没看到什么？

--

一些测试表明

styleObject = {
    'height': 200 + 'px',
    'background': 'red'
};

有效并应用于 div ，但是替换 200与 this.height (类型 number )没有。

Answer 1

试试这个方法

[ngStyle]="isTrue ? {width: '50px', height: '20px'} : {}"

或者

[ngStyle]="{
  width: '50px', 
  height: '20px'
}"