Angular 在不更新对象引用的情况下不会触发更改检测

Question

我有一个使用以下模型类的角度应用程序：

export interface Product {
  id: number;
  name: string;
  currentPrice: number;
  orders?: Order[];
  lastUpdate?: Date;
}

export interface Order {
  orderId: string;
  qty: number;
  amount: number;
}

当用户添加订单时，我想在 UI 上添加注释。但是，Angular 在不更新产品的对象引用的情况下不会触发更改检测。

复制于：https://stackblitz.com/edit/ag-grid-angular-use-gridoptions-k75cr8?file=src/app/order.component.ts

“添加订单”按钮不会添加“产品/订单在 hh:mm:sss 上更新”条目。 “添加订单和更改参考”按钮添加它的条目。

为什么我需要更新模型的参考来触发变化检测？ （为什么在点击“添加订单”按钮时订单表仍然更新而没有触发更改检测）

Answer 1

当用户添加订单时，我想在 UI 上添加注释。但是，Angular 在不更新产品的对象引用的情况下不会触发更改检测。

在您的示例中，Angular 会在您单击“添加订单”按钮时运行更改检测，这就是 OrderComponent 中的表反映新添加的订单的原因。

“添加订单”按钮不会添加“产品/订单在 hh:mm:sss 上更新”条目。 “添加订单和更改参考”按钮添加它的条目。

“添加订单”按钮不会添加条目，因为未调用与产品关联的 @Input() 设置器。为什么不叫？因为 Angular 执行引用检查，并没有发现属性绑定有任何变化。所以它不会更新绑定。

在“添加订单和更改参考”的情况下，您正在更改参考，因此 Angular 将更新绑定，然后调用 @Input 设置器来更新 this.notes 值。

为什么我需要更新模型的参考来触发变化检测？ （为什么在点击“添加订单”按钮时订单表仍然更新而没有触发更改检测）

使用DefaultChangeDetectionStrategy 时无需更新引用即可触发更改检测。为什么订单表会更新，是因为变更检测。

Answer 2

既然你得到了关于可以在不更新参考的情况下工作的参考问题的答案；

您可以发送订单作为输入，并且可以在订单中保存orderedDate 信息。这是更新的堆栈闪电战；

https://stackblitz.com/edit/ag-grid-angular-use-gridoptions-lmvcv4?file=src%2Fapp%2Forder.component.ts

如果您仍想发送产品，您可以相应地更新输入，这也可以。