显示时如何根据Angular中的对象属性更改背景颜色答案

【问题标题】：How to make background color change when displaying, depending on object property in Angular显示时如何根据Angular中的对象属性更改背景颜色
【发布时间】：2021-05-31 00:20:33
【问题描述】：

我已经使用名为 Orderline 的 Angular 接口处理了我的 BE 对象，并将它们放入名为“orderlines”的数组中。如果“change_color”属性为真（它是一个布尔字段），我想在绿色背景上显示“orderline.ct_no”。

组件：

public displayOrderlines() {
this.service.getOrderLines().subscribe((response : Orderline[]) => {  
  this.orderlines = response;  

})

}

在 .html 中我已经尝试过了，但它抛出了一个很大的错误，有什么想法吗？

 <ng-container *ngFor="let orderline of orderlines">
 <div  class="row" >
    <div [style.backgroundColor]="{{ orderline.color_change }} ? 'green' : 
    'white' " 
     class="container">
        <div class="column">
            <p class="value" >{{ orderline.ct_no }}</p>
     </div>
 </div>
 </ng-container>

【问题讨论】：

使用属性绑定[]时不需要插值{{}}

标签： html css angular typescript angular-directive

【解决方案1】：

<div [style.backgroundColor]="orderline.color_change ? 'green' : 'white'" class="container">

【讨论】：