Angular2 Formular SteuerwertÄnderungen beobachtbar abgeschlossen nie aufgerufen

Question

Ich versuche gerade, einen einfachen Loader auf meiner Suchleiste zu zeigen, während die Suche stattfindet. Ich habe geplant, eine Variable in der subscribe Callback auf der valueChanges Observable von meinem Formular Steuerelement auf einen Wert "loading", und um es auf eine leere Zeichenfolge im vollständigen Rückruf setzen. Der vollständige Rückruf wird jedoch nie aufgerufen.

Ich habe auch versucht, einen Rückruf auf das Observable schließlich hinzuzufügen, aber es wird auch nie aufgerufen.

Mein Code:

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

Ich habe herausgefunden, dass ich den falschen Ansatz versuche. Stattdessen erkannte ich, ich hatte debounceTime auf meinem Observable, also registrierte ich ein keyup Ereignis auf meinem Eingabesteuerelement, und darin legte den Wert von loadingClass auf "loading", und in meinem Abonnement legte ich den Wert zurück auf eine leere Zeichenfolge.

Answer 2

Es ist normal, da der beobachtbare nie abgeschlossen ist. Die valueChanges ermöglicht es Ihnen, Wert von Ihrem Suchfeld zu erhalten. In der Tat möchten Sie benachrichtigt werden, wenn die Suche abgeschlossen ist.

So würde ich so etwas versuchen, unter der Annahme, dass die searchImage tatsächlich die Suche tut und zurück eine beobachtbare:

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

in diesem Artikel für die Verwendung des flatMap Betreiber:

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

Answer 3

Ich hoffe, dass dies einige Leute dazu bringen könnte, Angular2 Forms besser zu verstehen. Angular hat zwei verschiedene Ansätze zum Erstellen von Formen (reaktive und Template-Form). Wenn du dir dessen nicht bewusst bist, könntest du zu unordentlichen Apps kommen.

valuesChages ist eine Eigenschaft der Richtlinie NgModel, und die Klasse Formcontrol (halten Sie es, dass etwas dagegen).

Die reaktiven Ansätze verwenden, um den ReactiveFormsModule import (your.module.ts):

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

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

Auf diese Weise können Sie das [(formControl)] Eigentum auf Ihrem Formular-Steuerelemente (template.component verwenden können. html).

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

Template-driven genähert (your.module.ts):

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

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

Dieser genähert hat seine eigene Form Steuerungseigenschaften, ngModel (your.template.ts):