Angular2フォームコントロールvalueChanges observable completeはまだ呼び出されていません

Question

私は現在、検索が行われている間、検索バーに単純なローダーを表示しようとしています。私は、valueChangesの私のフォームコントロールから "ローディング"値に観測可能なサブスクライブコールバックの変数を設定し、完全なコールバックの空の文字列に設定する予定です。ただし、完全なコールバックは決して呼び出されません。

また、コールバックを最後にobservableに追加しようとしましたが、コールされることもありません。

マイコード：

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"); 
      }); 
} 

Answer 1

私は間違ったアプローチを試みていることを知った。代わりに、私は私の観測にdebounceTimeがあることに気付いたので、入力コントロールにkeyupイベントを登録し、loadingClassの値を"loading"に設定し、サブスクライブで値を空の文字列に戻しました。

Answer 2

、観察が終了されることはありませんので、それは普通のことです。 valueChangesでは、検索ボックスから価値を受け取ることができます。実際、検索アクションが完了したときに通知を受けたいとします。

だから私はsearchImageが実際に検索を行うことを想定し、そのようなことを試してみて、観察を返します：

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

Answer 3

これは、Angular2フォームをよりよく理解できるようになることを期待しています。 Angularには、フォームを作成する2つの異なるアプローチがあります（ReactiveフォームとTemplateフォーム）。これを認識していないと、あなたは乱雑なアプリにつながる可能性があります。

valuesChagesディレクティブNgModel、およびクラスFormControl（それはそれを気にしておく）のプロパティです。

反応性のアプローチは、ReactiveFormsModule import （your.module.ts）を使用します。

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

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

はこの方法であなたは（template.componentフォームのコントロールに[(formControl)]プロパティを使用することができます。 html）。

<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）：