Angular2 NgStyle未在单击时更新

该组件具有来自其父对象的输入，并具有此输入对象的输出事件。NgStyle从组件中获取样式对象以进行样式设置。单击事件更改了布尔值，但样式对象没有相应更新，因此颜色保持不变。我必须重新分配一个新对象，以便NgStyle看到新的布尔值。我做错了什么

ProductItemComponent.ts：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import {Product} from '../../model/product';

@Component({
selector: 'app-product-item',
templateUrl: './product-item.component.html',
styleUrls: ['./product-item.component.css']
})

export class ProductItemComponent implements OnInit {

  @Input() public product!:Product;
  @Output() private updateStatus: EventEmitter<Product>;

  public statusTextStyle:object;
  public classStyle:object;

  constructor() {
    this.updateStatus = new EventEmitter<Product>();
  }


 ngOnInit(): void {

    this.statusTextStyle = {
       // if true color green, if false red
      "color" : this.product.getStatus() ? "var(--ok)" : "var(--danger)"
    }

 }

  onUpdateStatus(event){
    this.updateStatus.emit(this.product);

    // have to reassign a new object to change style
    this.statusTextStyle = {
      "color" : this.product.getStatus() ? "var(--ok)" : "var(--danger)"
    }

    console.log(this.statusTextStyle);
  }

}

如果未使用新对象重新分配

this.statusTextStyle

（调用getStatus（）），则NgStyle将使用ngOnInit中设置的样式

---

兄弟，我想在这里添加我的一段代码，它运行得很好，也许会对你有所帮助

 Style1={
     fontSize: '3em',
     backgroundColor: this.CardData > 1 || this._ProductQuantity > 1 ? 'ivory' : "orange",
     color: this.CardData > 1 || this._ProductQuantity > 1 ? "green" : "red",
     'fa': true,
     'far fa-check-square': this.CardData > 1 || this._ProductQuantity > 1, 
     'far fa-times-circle': this.CardData < 1 || this._ProductQuantity < 1

   };

Style1={
fontSize:'3em'，
背景颜色：this.CardData>1 | | this._ProductQuantity>1？“象牙色”：“橙色”，
颜色：this.CardData>1 | | this._ProductQuantity>1？“绿色”：“红色”，
"法":对,，
“far fa check square”：this.CardData>1 | | this._ProductQuantity>1，
“远fa乘以圆”：this.CardData<1 | | this._ProductQuantity<1
};

我没有使用'var（--ok'），而是使用颜色的直接值。

---

如果有帮助，请勾选我的答案

@CloudWave，您需要初始化输出：

@output（）private updateStatus:EventEmitter=new EventEmitter（）

但是，如果检查代码，请确保不要在任何其他地方更改
statusTextStyle
。ngOnInit仅在第一次绘制组件时发生（或者如果在*ngFor下有一个组件，并且在*ngFor下也更改了数组）

如果取消对
//重新分配对象下的行的注释，则可以检查工作情况

另一种方法是做一个getter

get statusTextStyle(){
    return {
      color: this.product.getStatus() ? "var(--ok)" : "var(--danger)"
    };
  }

你的

注意：将对象传递给输入时，不需要传递给产品的
@Output
，对象的任何更改（在子对象或父对象中）都会更改空间

更新注释不清楚。我想说的是，当您将as
@Input
用于对象时，对象始终是相同的。您可以在任何地方更改对象的一个属性—在父对象或子对象中—所以，我们可以在子对象中进行更改

  onUpdateStatus(event) {
    this.product.setStatus(!this.product.getStatus());
  }

我们不需要更改父级中的“产品”，也不需要使用@Output。
您能提供您的
ngStyle
代码吗？我想您的问题是应该分配
this.statusTextStyle.color=this.product.getStatus（）？“var（--ok）”：“var（--danger）”
。然后您可能需要调用
ChangeDetectorRef
（注入它）
ChangeDetectorRef.detectChanges（）
。由于性能原因，我不推荐这种方法，如果您能提供更多代码，也许我可以考虑其他方法。：）为什么您希望
product.getStatus（）？您似乎还缺少基于该错误消息的
CommonModule
导入？另外，当询问有关
ngStyle
用法的问题时，您的
ngStyle
绑定也会很有用。@JorgeMussato我将
this.statusTextStyle
初始化为
ngOnInit
中的新对象。如果我指定like
this.statusTextStyle.color
错误投诉：类型“object”上不存在属性颜色。@bryan60我最近刚学了Angular，我跟着书
Angular启动并运行
。如果我理解正确，组件中的
事件发射器将从其父级触发此输出的事件。该值确实发生了更改，正如我在console中所显示的。LogU是否可以创建最小stackblitz demoDirect值不起作用。情况可能有问题。还有其他帮助吗？我想如果我在ngOnInit中初始化样式，样式将在之后继续更改。因此，getter用于行
{{product.name}
？
将产品传递给@Output
是什么意思？“ngOnInit”不会创建变量之间的关系，获取实际变量并计算其他变量。关于
@Input
，我更新了答案以清楚地显示注释。谢谢你的答案。实际上我在做运动。书中说，为了使子组件真正可重用，数据对象应该由其父组件传入，这就是为什么我使用
@Output
decorator来提供封装。
  export class Product {

  private _status:boolean = false;

  constructor(public name:string,
              public code:string,
              public price:number,
              public quantity:number){}

  public getStatus():boolean{
      return this._status;
  }

  public setStatus(status:boolean):void{
      this._status = status;
    }
  }

 Style1={
     fontSize: '3em',
     backgroundColor: this.CardData > 1 || this._ProductQuantity > 1 ? 'ivory' : "orange",
     color: this.CardData > 1 || this._ProductQuantity > 1 ? "green" : "red",
     'fa': true,
     'far fa-check-square': this.CardData > 1 || this._ProductQuantity > 1, 
     'far fa-times-circle': this.CardData < 1 || this._ProductQuantity < 1

   };

get statusTextStyle(){
    return {
      color: this.product.getStatus() ? "var(--ok)" : "var(--danger)"
    };
  }

  onUpdateStatus(event) {
    this.product.setStatus(!this.product.getStatus());
  }