在服务中使用FormArray时的OnPush更改检测

Question

开发人员

我有一个存储FormArray的服务，它由一个组件附加到，由另一个组件查看。尽管FormArray是不可变的并且被重新分配给，但视图并没有成功更新。

当不使用OnPush更改检测时，或者如果使用changeDetectorRef.detectChanges()强制刷新更改检测，则问题会消失。不过，这两种解决方案都让人觉得很粗糙，我真的不明白为什么它不能正常工作。

发行的回购样本：https://stackblitz.com/edit/angular-9hwgcn?file=src/app/app.component.html(添加商品后，购物商品列表不会更新(

Answer 1

ChangeDetectionStrategy.OnPush会根据您的经验停止自动更改检测。它的用例主要是输入/输出组件；它告诉它们仅在CCD_ 6改变时检测改变。

话虽如此，当我看到你的代码时，

• 您没有@Input组件
• 您的组件没有父/子关系
• 你在做一项全球性的行动

并且您停止自动更改检测。在这种情况下，你必须告诉Angular有一个变化需要检测。

所以，不，它没有生气，是的，它正在正常工作。

尽管如此，如果你想避免所有这些，并希望你的代码更具反应性，你可以使用可观察性/主题。这里有一个例子：

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>

Stacklitz