Angular2 Formular-Steuerelement valueChanges beobachtbaren komplette nie genannt

Ich bin derzeit versuchen zu zeigen, einen einfachen loader auf meiner Suche bar, während die Suche stattfindet. Ich habe geplant, um eine variable festzulegen, die in der subscribe callback auf die valueChanges beobachten aus meinem Formular-Steuerelement zu einem Wert "laden", und legen Sie es auf eine leere Zeichenfolge in die complete-callback. Aber der komplette callback wird nie aufgerufen.

Habe ich auch versucht, indem ein callback, um endlich auf das zu beobachten, aber es ist auch nie genannt.

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");
            });
}
InformationsquelleAutor Matsura | 2016-05-30
  1. 5

    Es ist normal, denn das sichtbare ist niemals abgeschlossen. Die valueChanges ermöglicht den Empfang von Wert aus dem Feld "suchen". In der Tat, Sie benachrichtigt werden wollen, wenn die Suchaktion abgeschlossen ist.

    So, ich würde versuchen, so etwas wie, dass, unter der Annahme, dass die searchImage eigentlich die Suche und Rückgabe eines beobachtbar:

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

    Finden Sie in diesem Artikel für die Verwendung der flatMap Betreiber:

    • In meinem html-template habe ich eigentlich ein Rohr, das hängt von der dieser.imageSearch-Attribut, so dass ich nur setzen Sie es in die subscribe-Teil. Gibt es irgendwelche Anpassungen vorgenommen werden, um zu Ihrem Beispiel, so kann ich es verwenden?
    • Haben Sie eine Idee, wie man die Veränderungen nur, wenn die überprüfung bestanden hat oder prüfen für die Validierung in valueChanges?
    InformationsquelleAutor Thierry Templier
  2. 1

    Ich herausgefunden, dass ich versuche, mich der falsche Ansatz. Stattdessen merkte ich, ich hatte debounceTime auf meine zu beobachten, so registrierte ich einen keyup Ereignis in meinem input-Steuerung, und legen Sie den Wert des loadingClass zu "loading", und in meinem abonniert habe ich den Wert wieder auf eine leere Zeichenfolge.

    InformationsquelleAutor Matsura
  3. 0

    Ich hoffe das konnte dazu führen, dass einige Menschen zu einem besseren Verständnis der Angular2 Formen. Winkel hat, die zwei verschiedene Ansätze des Gebäudes bildet (Reaktiv-und Template-form). Nicht bewusst, kann dies dazu führen Sie zu chaotisch apps.

    valuesChages ist eine Eigenschaft der Richtlinie NgModel, und die Klasse FormControl (halten Sie es daran, dass).

    Die reaktive Ansätze verwenden die ReactiveFormsModule import
    (Ihre.- Modul.ts):

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

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

    In dieser Weise kann man die [(formControl)] Grundstück, auf Ihre Formular-Steuerelemente (template.component.html).

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

    Template-driven angesprochen (Ihre.- Modul.ts):

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

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

    Diesem genähert hat seine eigenen Formular-Steuerelement-Eigenschaften, ngModel (Ihre.- Vorlage.ts):

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