0

我正在使用 Angular 开发电子商务应用程序。我正在使用 OnChange 生命周期挂钩来检测购物车组件中的更改并计算总价。但是，未检测到更改。

打字稿代码：

import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Device } from '../../shared/Device.model';

    @Component({
      selector: 'app-cart-calculator',
      changeDetection: ChangeDetectionStrategy.OnPush,
      templateUrl: './cart-calculator.component.html',
      styleUrls: ['./cart-calculator.component.scss']
    })
    export class CartCalculatorComponent implements OnChanges {
    
      @Input() cartProducts: Device[];
      @Input() quantities: number[];
    
      constructor() { }
    
      totalPrice: number = 0;
    
      ngOnInit(): void {
      }
    
      ngOnChanges() {
    
        this.totalPrice = 0;
        for (let i = 0; i < this.cartProducts.length; i++) {
          this.totalPrice += this.cartProducts[i].devicePrice * this.quantities[i];
          console.log(this.quantities);
        }
      }
    }

模板部分：

<app-cart-calculator [quantities]="quantities" [cartProducts]="cartDevices"></app-cart-calculator>
4

2 回答 2

2

Array 是 javascript 中的一个对象，因此每次您希望 ngOnChanges() 检测到它时都必须传递新数组。因此，例如：-您将新值推送到数组中，例如：-

       arr.push(4);

之后你需要给它一个新的参考：-

 arr = [...arr];
于 2020-12-18T15:43:14.133 回答
0

您需要将SimpleChanges参数添加到您的实现 ( ngOnChanges) 中OnChanges。

ngOnChanges(changes: SimpleChanges) {      
  this.totalPrice = 0;
  const products = changes['cartProducts'] && changes['cartProducts'].currentValue;
  this.totalPrice = products.reduce((totalPrice, product) => totalPrice + (product.quantity * product.devicePrice), 0);
}

您也有参考问题，您正在更改父cartDevices组件中的属性，而不是重新分配其值。

于 2020-12-18T15:49:09.833 回答