Angular2 NgStyle 没有在点击时更新

Question

组件有一个来自其父级的输入，并且有一个针对该输入对象的输出事件。 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);
  }

}

产品-item.component.html：

<div class="productContainer">
  <div class="overlay">
      <div [ngStyle]="statusTextStyle">{{product.name}}</div>
      <hr>
      <div>Status: {{product.getStatus()}}</div>
      <div>Price: {{product.price}}</div>
      <br>
      <div>Code: {{product.code}}</div>
      <br>
      <div>Stock: {{product.quantity}}</div>
      <hr>
      <button (click)="onUpdateStatus($event)">UPDATE STATUS</button>
  </div>
</div>

家长：

import { Component, OnInit } from '@angular/core';
import { Product as ProductModel} from '../../model/product';

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

  export class ProductListComponent implements OnInit {

  products: Array<ProductModel>;

  constructor() { }

   ngOnInit(): void {
     this.products = [
       new ProductModel('A','1',3,40),
       new ProductModel('B','2',4,50),
       new ProductModel('C','3',22,41),
       new ProductModel('E','4',342,433),
       new ProductModel('Z','5',33,477)
     ]
   }

   onUpdateStatus(product:ProductModel){

     product.setStatus(!product.getStatus());
     console.log(product.getStatus());

   }

 }

父 html：

<div class="productList">
<div *ngFor="let product of products; let index as i;">

    <app-product-item [product]="product" (updateStatus)="onUpdateStatus($event)"></app-product-item>
    
</div>

产品型号：

  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;
    }
  }

如果this.statusTextStyle 没有重新分配一个新对象（回想一下getStatus()），NgStyle 使用在ngOnInit 中设置的样式

Stackblitz demo

Answer 1

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

 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

   };

我没有使用“var(--ok)”，而是使用颜色的直接值。 如果对你有帮助，请勾选我的回答

Answer 2

@CloudWave，你需要初始化输出：@Output() private updateStatus: EventEmitter<Product>=new EventEmitter<Product>();

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

如果您取消注释 //reassign object only works 下的行，您可以检查该工作。

另一种方法是做一个吸气剂

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

你的forked stackblitz using a getter

注意：当您将对象传递给 Input 时，您无需将产品传递给 @Output，对象中的任何更改 - 在子级或父级中 - 都会更改 apaarence

更新好吧，说明不清楚。我想说的是，当您将 @Input 与对象一起使用时，对象总是相同的。您可以在任何地方更改对象的一个​​属性-在父级或子级中-因此，我们可以在子级中进行

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

我们不需要更改父级中的“产品”，也不需要使用@Output。