Angular 组件的条件样式

Question

我正在尝试按照以下方式根据条件设置组件的样式。

<div class="col-md-3 d-flex justify-content-center align-items-center" ng-style ="{ ' background-color' : (vars.state=='Signup')? '#73c7af' : '#ffffff' }">

和我的 vars.state=Signup。 所以根据这个div的背景应该是#73c7af但它仍然是白色的。 谁能告诉我我哪里出错了？

Answer 1

ng-style是 AngularJS 的语法。 对于 Angular 2+，使用[ngStyle]=""语法。 （见文档）

<div class="col-md-3 d-flex justify-content-center align-items-center" 
     [ngStyle]="{'background-color': (vars.state=='Signup') ? '#73c7af' : '#ffffff'}">

Answer 2

您可以使用 style.propertyName 来设置任何条件样式属性。

<div class="col-md-3 d-flex justify-content-center align-items-center" [style.background]="someFunction()">