Angular4 - 样式绑定中的计算

Question

无论如何你可以在Angular4中的样式绑定目标中进行计算吗？

我已经尝试了

display: flex

Answer 1

您可以使用[style.width.px]="1 + 1"来实现这一目标。

Answer 2

这应该有效

   [style.width]="1+1+'px'"

基本上，当您使用[]时，必须是表达式，并且您不应该将{{}}放在值中，这是您使用时的一般Angular2规则属性绑定。

[style.width]="{{1+1}}"   is wrong because of `{{}}` in the value

Answer 3

[style.height.px]="200"
[style.height.px]="200 + 50"
[style.height.px]="_commonService.screenHeight"
[style.height.px]="_commonService.screenHeight + 50"
[style.height.px]="_commonService.screenHeight - (isHomePage == true?80:140)"
/* Other Examples **/
[ngStyle]="{'margin-top': isHomePage == true ? '0px' : '60px' }" 

Answer 4

您应该避免在视图中进行样式计算。只需创建一个函数来处理此计算，并仅返回视图中的结果。