Angular 子組件未檢測到更改

Question

我正在從父組件更新產品對象。 不知何故，子組件不會檢測到更改並且不會更新它。

產品.ts

export interface Product { 
    productId: number;
    productName: string;
    lastUpdated: string;
    orders: Array<Order>
}

訂單.ts：

export interface Order { 
    orderId: number;
    payments: Array<Payment>
}

付款.ts：

export interface Payment { 
    paymentId: number;
    amount: Array<number>
}

父組件.html

<product-details [(product)]="product1" (refreshProduct)="refreshProduct()"></product-details>

父組件.ts

product1: Product = null;

refreshProduct() {
      this.sub = this.productService.getTheLatestOrders().subscribe(
        (data) => {
          this.product1.lastUpdated = data.lastUpdated;
          this.product1.orders.forEach(order => {
            let latestOrderData = data.orders.find(d => d.orderId == order.orderId);
            if(latestOrderData) {
              order.payments = latestOrderData.payments;
            }
          });
          // this.product1 = JSON.parse(JSON.stringify(this.product1)); --> It works if I add this
      });
    }
  }

product-details.component.html（子組件）

<button id="refresh" name="refresh" (click)="refresh()" />
Last Updated : {{product.lastUpdated}}

<ng-container *ngFor="let order of product.orders">
      <ng-container *ngFor="let payment of order.payments">
             {{payment.date}} - {{payment.amount}} 
      </ng-container>
</ng-container>

product-details.component.ts（子組件）

@Input('product') product: Product;
@Output() refreshProduct = new EventEmitter<any>();

refresh() {
  this.refreshProduct.emit();
}

我試圖明確聲明changeDetection: ChangeDetectionStrategy.Default但沒有運氣。

如代碼中所述，如果我添加JSON.parse(JSON.stringify(this.product1)); 那么它的工作原理。 所以似乎我需要創建一個新對象，以便更改檢測工作。 我想我可以使用擴展運算符 (object.assign) 來確保它創建一個新對象。 但是，我不確定如何使用傳播操作更新 refreshProduct() 方法中的產品。

我認為代碼將如下所示：

this.product1 = {...this.product1, 
            lastUpdated: data.lastUpdated,
            orders: .... // --> Not sure how to loop through orders and update the payments

          };

編輯：我想我設法做到了。

this.product1 = {...this.product1, 
            lastUpdated: data.lastUpdated,
            orders: this.product1.orders.map((order) => {
                     let updatedOrder = data.orders.find(o => o.orderId == order.orderId);  
                     return {...order, order.payments: updateOrder.payments};

                    })
          };

請讓我知道是否有更好的解決方案。

Answer 1

嘗試這樣做：

refreshProduct() {
      let temp: Product = {};
      this.sub = this.productService.getTheLatestOrders().subscribe(
        (data) => {
          temp.lastUpdated = data.lastUpdated;
          temp.orders.forEach(order => {
            let latestOrderData = data.orders.find(d => d.orderId == order.orderId);
            if(latestOrderData) {
              order.payments = latestOrderData.payments;
            }
          });
          this.product1 = temp;
      });
    }
  }

這樣每次它都會將更新的值分配給產品。