在服务中使用 FormArray 时的 OnPush 变化检测

Question

各位开发者，

我有一项存储 FormArray 的服务，该服务由一个组件附加到另一个组件上并由另一个组件查看。即使 FormArray 是不可变的并且被重新分配给，视图也没有成功更新。

不使用 OnPush 变化检测时，或者如果使用 changeDetectorRef.detectChanges() 强制刷新变化检测，问题就会消失。不过，这两种解决方案都感觉很糟糕，而且我真的不明白为什么它不能正常工作。

存在问题的示例存储库：https://stackblitz.com/edit/angular-9hwgcn?file=src/app/app.component.html（添加商品后，购物商品列表未更新）

Answer 1

ChangeDetectionStrategy.OnPush 停止了您所经历的自动更改检测。它的用例主要是 input/output 组件；它告诉他们仅当 @Input 发生变化时才检测变化。

也就是说，当我查看您的代码时，

您没有 @Input 组件
您的组件没有 parent/child 关系
您正在进行全局操作

然后您停止自动更改检测。在这种情况下，您必须告诉 Angular 有待检测的变化。

所以不，这不是 hacky，是的，它正在正常工作。

然而，如果您想避免所有这些并希望您的代码更具反应性，您可以使用 observables/subjects。这是一个例子：

export class ShoppingListService {
  shoppingListForm: BehaviorSubject<FormArray> = new BehaviorSubject(
    this.fb.array([])
  );

<ng-container *ngIf="shoppingListService.shoppingListForm | async as shoppingListForm">
  <div class="course-item" *ngFor="let shoppingListItem of shoppingListForm.controls">
    <p>{{ shoppingListItem.value | json }}</p>
  </div>
</ng-container>

Stackblitz

在服务中使用 FormArray 时的 OnPush 变化检测

OnPush change detection when using a FormArray in a service

angular2-forms

angular2-changedetection

angular

angular-reactive-forms

angular-changedetection