如何在显示时更改背景颜色,具体取决于 Angular 中的对象属性

医生老师

我已经使用名为 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>
哈维尔马丁内斯

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在 angular 11 中更改滚动时的粘性标题背景颜色

在 Angular 中单击 <li> 时如何更改背景颜色?

如何处理Angular中的对象属性更改?

如何在Angular中更改整个页面的背景颜色

如何在Angular HTML属性中编写复杂的Typescript对象

如何在Angular中访问嵌套对象的属性?

如何在Angular中总结对象的属性

如何在选定对象的自动完成中仅显示特定对象属性而不是 Angular 7 中的 [对象]

如何从Angular HTTP调用中捕获JSON对象的属性并修复Angular CLI中的“无属性”错误?

如何按 Angular 数组中的属性过滤对象?

如何避免对angular js中的某些对象属性进行过滤

如何使用 Angular 中对象的字段设置 HTML 宽度属性?

如何从[Angular 2]中的指令检测图像对象的src属性中的更改?

如何从Angular中的另一个对象过滤基于属性的对象数组?

Angular2如何在拖放时更改背景颜色

如何在 Angular 6 打字稿中访问对象数组中的单个属性?

组件属性取决于当前日期时间时如何管理Angular2“检查后表达式已更改”异常

在angular2中,如何获取onChanges以获取为@Input发送的对象上更改的属性

如何在 Angular2 中动态更改十六进制背景颜色?

当我尝试更改颜色取决于计数时,它显示错误TypeError:无法读取null的属性'style'

如何在Angular2对象数组中基于属性值进行过滤?

如何在Angular 8中处理与对象的null属性值的双向绑定?

如何在Angular中访问另一个对象内的动态命名属性?

我们如何在 Angular 中获取表单值作为具有多个属性的对象?

如何使用 angular 6 中的字符串从对象中读取属性值

角度显示悬停时的文本,具体取决于<td>中显示的状态

angular 4 typeahead仅显示在对象数组中具有匹配项的属性?

如何提取用户通过Angular中的mat-options(下拉列表)选择的对象的多个属性?

如何将对象属性绑定到 angular2 中的文本框