angular - 在 Angular 2 中订阅 valueChanges 的正确方法

Question

我一直在摆弄 Angular 2 中的响应式表单和 valueChanges 订阅。我不太明白为什么某些形式的订阅似乎是不允许的。

this.form.get('name').valueChanges /* <- doesn't work */
  .do(changes => {
    console.log('name has changed:', changes)
    });
  .subscribe();

this.form.get('title').valueChanges.subscribe( /* <- does work */
  changes => console.log('title has changed:', changes)
);

This plunker重现问题(打开 DevTools 控制台以查看错误):

ZoneAwareError {stack: "Error: Uncaught (in promise): TypeError: Cannot se…g.com/zone.js@0.7.5/dist/zone.js:349:25) []", message: "Uncaught (in promise): TypeError: Cannot set prope…ore.umd.js:8486:93)↵ at Array.forEach (native)", originalStack: "Error: Uncaught (in promise): TypeError: Cannot se…ps://unpkg.com/zone.js@0.7.5/dist/zone.js:349:25)", zoneAwareStack: "Error: Uncaught (in promise): TypeError: Cannot se…g.com/zone.js@0.7.5/dist/zone.js:349:25) []", name: "Error"…}

第一个模式(do)确实不违法吗？

Answer 1

其中一种方式是:

debounceTime 将在给定的毫秒数后进行订阅。如果不需要，请忽略。

distinctUntilChanged 将仅在实际值发生变化时强制订阅。

Update for Angular 8+

     this.form.controls['form_control_name']
                .valueChanges
                .pipe(
                    .debounceTime(MilliSeconds)
                    .distinctUntilChanged()
                )
                .subscribe({
                    next: (value) => {
                        //use value here
                    }
                });