angular - 如何订阅响应式(Reactive) FormGroup 并映射值变化( Angular 6)

Question

我有一个 Angular 6 的简单表单，只有一个文本字段和一个下拉列表。我想要的是观察该表单并检查该表单中的每个更改。因此，无论是在文本字段中输入字母还是下拉列表发生变化，我想调用一个函数。

表单组是这样的

  nameForm = this.formBuilder.group({
    name:['',Validators.required],
    cepDrop:['construction']
  });

我的逻辑是

每当表单值发生变化时，请稍等一下，直到没有其他更改发生，抓取表单对象，将其内容映射到函数中，然后订阅该函数的结果。

  ngOnInit() {
    this.nameForm.valueChanges
    //.debounceTime(400)
    //.distinctUntilChanged()
    .map( terms => this.mapcmsService.searchName(terms.name, terms.cepDrop))
    .subscribe( value => console.log(value));
  }

首先debounceTime和distinctUntilChanged给出错误Property 'debounceTime' does not exist on type 'Observable<any>'.

主要问题是map也给出了同样的错误。 Property 'map' does not exist on type 'Observable<any>'.

我能做什么才能解决这个问题？如何观察整个表单组并将其值映射到函数？

谢谢

Answer 1

这是执行 rxjs 的旧方法。现在您应该将额外的运算符传递给 pipe 运算符，如下所示:

import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';

...

this.nameForm.valueChanges.pipe(
    debounceTime(400),
    distinctUntilChanged(),
    map(terms => this.mapcmsService.searchName(terms.name, terms.cepDrop))
).subscribe( value => console.log(value));