Angular2 表单控件 valueChanges 可观察到的完整从未调用答案

【问题标题】：Angular2 form control valueChanges observable complete never calledAngular2 表单控件 valueChanges 可观察到的完整从未调用
【发布时间】：2016-09-28 15:14:25
【问题描述】：

我目前正尝试在搜索进行时在我的搜索栏上显示一个简单的加载程序。我计划在我的表单控件的valueChanges observable 上的订阅回调中设置一个变量为值“正在加载”，并在完整的回调中将其设置为一个空字符串。但是，永远不会调用完整的回调。

我也尝试在可观察对象上添加一个回调到 finally，但它也从未被调用。

我的代码：

searchBox: Control = new Control();
loadingClass: string = "";

constructor() {
    this.searchBox.valueChanges
            .debounceTime(400)
            .distinctUntilChanged()
            .subscribe((text: string) => {
                this.imageSearch = text;
                this.loadingClass = "loading";
            }, (err: Error) => {
                console.log(err);
            }, () => {
                this.loadingClass = "";
                console.log("test");
            });
}

【问题讨论】：

标签： javascript typescript angular rxjs observable

【解决方案1】：

这很正常，因为 observable 从未完成。 valueChanges 允许您从搜索框中接收值。实际上，您希望在搜索操作完成时收到通知。

所以我会尝试类似的方法，假设 searchImage 确实进行了搜索并返回了一个 observable：

constructor() {
  this.searchBox.valueChanges
              .debounceTime(400)
              .distinctUntilChanged()
              .flatMap((text:string) => { // <-------
                this.loadingClass = "loading";
                return this.searchImage(text);
              })
              .subscribe((searchResult) => {
                  this.imageSearch = searchResult;
                  this.loadingClass = ""; // <----
              }, (err: Error) => {
                  console.log(err);
              });
}

flatMap 操作符的使用见这篇文章：

https://jaxenter.com/reactive-programming-http-and-angular-2-124560.html

【讨论】：

在我的 html 模板中，我实际上有一个依赖于 this.imageSearch 属性的管道，所以我只是在订阅部分设置它。是否需要对您的示例进行任何调整以便我可以使用它？
您知道如何仅在验证通过后获取更改或在 valueChanges 中检查验证吗？

【解决方案2】：

我发现我尝试了错误的方法。相反，我意识到我的 observable 上有debounceTime，所以我在输入控件上注册了一个keyup 事件，并将loadingClass 的值设置为"loading"，并在我的订阅中将值设置回到一个空字符串。

【讨论】：

【解决方案3】：

我希望这可以让一些人更好地理解 Angular2 Forms。 Angular 有两种不同的构建表单的方法（反应式和模板表单）。没有意识到这一点可能会导致您使用混乱的应用程序。

valuesChages 是指令 NgModel 和类 FormControl 的属性（请记住）。

反应式方法使用 ReactiveFormsModule import (your.module.ts):

import {ReactiveFormsModule} from '@angular/forms';

@NgModule({
  ...
  imports: [
    ...
    ReactiveFormsModule,
    ...
  ],
  ...
})

通过这种方式，您可以在表单控件 (template.component.html) 上使用 [(formControl)] 属性。

<input type="text" class="form-control" id="searchBox"
       required
       [(formControl)]="searchBox"/>

模板驱动接近（your.module.ts）：

import {FormsModule} from '@angular/forms';

    @NgModule({
      ...
      imports: [
        ...
        FormsModule,
        ...
      ],
      ...
    })

这种方法有自己的表单控件属性，ngModel (your.template.ts)：

<input type="text" class="form-control" id="searchBox"
       required
       [(ngModel)]="searchBox"/>

【讨论】：