英文:
How to apply Boolean functions in ngStyle
问题
<div *ngFor="let singleorder of order.order">
<p [ngStyle]="{
'color': (singleorder.status === 'CONFIRM') ? 'green' : 'red',
'background': (singleorder.status === 'CONFIRM') ? '#e4f4eb' : '#f7d0c7'
}">{{singleorder.status}}</p>
</div>
英文:
<div *ngFor= “ let singleorder of order.order”>
<p [ngStyle]="
'color':(single order.status === 'CONFIRM' )? 'green' : 'red' ,
'background' : (single order.status === 'CONFIRM')? '#e4f4eb': '#f7d0c7'
}">. {{single order.status}}>
</div>
I am expecting the background color and color to be green when the value of status is CONFIRM and also show red when the value is CANCELLED
答案1
得分: 0
根据文档，这是正确的语法（请注意大括号）。
<p [ngStyle]="{
'color': singleorder.status === 'CONFIRM' ? 'green' : 'red',
'background': singleorder.status === 'CONFIRM' ? '#e4f4eb' : '#f7d0c7'
}">
{{singleorder.status}}>
</p>
由于你正在基于相同条件设置多个样式属性，可能更清晰的做法是定义几个CSS类并使用[`ngClass`](https://angular.io/api/common/NgClass)或[class绑定](https://angular.io/guide/class-binding)。
英文:
Based on the documentation, this is the correct syntax (note the curly braces).
<p [ngStyle]="{
'color': singleorder.status === 'CONFIRM' ? 'green' : 'red',
'background': singleorder.status === 'CONFIRM' ? '#e4f4eb': '#f7d0c7'
}">
{{singleorder.status}}>
</p>
Since you're basing multiple style properties on the same condition, it would probably be cleaner to define a couple of CSS classes and use ngClass or use class binding.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论