如何以角度 6 订阅反应式 FormGroup 并映射值更改答案

【问题标题】：How to subscribe to a reactive FormGroup and map the value changes, in angular 6如何以角度 6 订阅反应式 FormGroup 并映射值更改
【发布时间】：2018-07-22 15:51:47
【问题描述】：

我有一个简单的 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>'.

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

谢谢

【问题讨论】：

你需要迁移到 RxJS 6：github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/…
@jonrsharpe 我正在使用 rxjs6，但我想我正在遵循的教程较旧。我该怎么办？这是tutorial
要么找到更新的教程，要么根据迁移指南调整您正在遵循的教程中的代码。
它只使用管道（operator1，operator2，operator3...）。无论如何，您不需要使用表单组，只需使用表单控件即可。您可以在stackoverflow.com/questions/50732416/… 中查看示例
@Eliseo 谢谢，但您提供的链接显示了在文本输入值更改后触发搜索的代码。我想修复在文本输入值更改或下拉列表值更改后触发的代码。

标签： angular rxjs observable angular6

【解决方案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));

【讨论】：

谢谢。是的，这就是我想出的，并且有效。但在控制台中，我得到 Type 'Observable<SearchResult[]>' is not assignable to type 'SearchResult[]'. Property 'includes' is missing in type 'Observable<SearchResult[]>'. 指的是 this.results = this.nameForm.valueChanges.pipe( 行。我将results 声明为results: SearchResult[];，并在我的服务中将searchName 声明为searchName(name:string, cep:string):Observable<SearchResult[]>{。我对错误感到困惑，出了什么问题？有任何想法吗？谢谢
您的服务正在返回一个 Observable。我假设您正在发出http请求？这是异步的，因此 Angular 的句柄是通过返回一个 Observable 来实现的。使用 switchMap 运算符代替 map 运算符，然后在您的 subscribe 函数中，您将看到结果。