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

Question

我有一个 angular 应用程序使用以下模型 class:

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”条目。 “添加订单和更改参考”按钮添加了它的一个条目。

为什么我需要更新模型的引用以触发变化检测？（为什么订单 table 仍会在单击“添加订单”按钮时未触发更改检测的情况下得到更新）

Answer 1

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

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

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

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

Answer 2

I would like to add a note on UI when user adds an order. However, angular does not fire change detection without updating object reference of the product.

在您的示例中，当您单击“添加订单”按钮时，Angular 会执行运行更改检测 ，这就是为什么 table OrderComponent 反映了新添加的订单。

"Add Order" button does not add an entry of "Product / Order updated on hh:mm:sss". "Add Order & Change reference" button adds an entry of it.

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

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

Why do I need to update reference of the model to fire change detection? (why does the order table still gets updated without triggering change detection on click of "Add Order" button)

使用 Default ChangeDetectionStrategy 时，您无需更新引用即可触发更改检测。为什么订单 table 得到更新，是因为更改检测。

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

Angular does not fire change detection without updating object reference

typescript

angular

angular-changedetection