Angular ReactiveForm display value OnPush

Question

我有一个由几个子组件构建的Angular Reactive Form，所有这些都使用OnPush策略。我还有一个简单的计算：数量*比率=总数；

如果总数是<input formControlName="total" />，那么即使使用OnPush，它也会立即更新。

但我想显示只读值，如：

<div class="number" >
{{ form.controls.total.value | number }}
</div>

事实上，这对OnPush不起作用。我必须在组件中使用ChangeDetectionRef

constructor(
private cdr: ChangeDetectorRef
) { }
ngOnInit() {
this.form.get('total').valueChanges.subscribe(data => {
this.cdr.markForCheck();
});
}
}

这是有效的。我只是想找到一个更优雅、不那么冗长的解决方案，比如一些内置管道之类的

感谢

Answer 1

这就是OnPush策略的工作原理。它不是每次用户单击某个东西(任何东西(时都检查整个组件树的更改，而是只侦听绑定值的更改。如果您正在更改非绑定值，您必须说"嘿，angular，I v changed not bound values，revalidate the component tree"-这就是ChangeDetectionRef将为您做的。

这是在"必须自己做"one_answers"表现良好"之间的权衡。