我正在尝试将管道应用到使用反应形式构建的输入中
<input nxInput required type='text' [value]="billingLetterForm.get('liabilityPercentage').value | percentage" formControlName='liabilityPercentage' />
这很好，但是，如何仅在blur事件上应用管道
我发现了this线程，但是这种针对模板驱动形式而不是反应形式的实际解决方案
我发现的一种解决方法是在blur上编写一个自定义函数，然后从此处应用管道，但这实际上会修改输入值，我认为这不是解决此问题的更干净的解决方案？
您可以在该字段中使用基于模糊的可观察基础事件来限制值更新的频率。
简单的方法是将您的字段作为ViewChild添加到父组件。 这样就可以从事件创建可观察对象，其中目标是您感兴趣的输入：
<input nxInput #liabilityPctInput ...>
class ComponentWithLiabilityPctInput {
...
@ViewChild('liabilityPctInput')
liabilityPctInput;
ngOnInit() {
let liabilityPctInputBlur$ = Rx.Observable.fromEvent(this.liabilityPctInput,'blur');
this.valueThatChangesOnBlur$ = liabilityPctInputBlur$
.pipe(map(() => billingLetterForm.get('liabilityPercentage').value));
}
}
然后您可以在带有async管道的模板中使用它：
<input nxInput #liabilityPctInput [value]="valueThatChangesOnBlur$ | async | percentage"...>