webentwicklung-frage-antwort-db.com.de

Angular2 form control valueChanges observable complete wurde nie aufgerufen

Ich versuche gerade, während der Suche einen einfachen Loader in meiner Suchleiste anzuzeigen. Ich habe geplant, eine Variable im subscribe-Rückruf für die valueChanges, die von meinem Formularsteuerelement aus beobachtet wird, auf einen Wert "loading" zu setzen und sie im vollständigen Rückruf auf eine leere Zeichenfolge zu setzen. Der vollständige Rückruf wird jedoch nie aufgerufen.

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

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

Ich habe herausgefunden, dass ich den falschen Ansatz versuche. Stattdessen wurde mir klar, dass ich debounceTime auf meinem Observable hatte, also habe ich ein keyup -Ereignis auf meinem Eingabesteuerelement registriert und darin den Wert von loadingClass auf "loading" gesetzt, und in meinem Abonnement habe ich den Wert auf einen leeren String zurückgesetzt.

1
Matsura

Es ist normal, da das Observable niemals abgeschlossen wird. Mit der valueChanges können Sie Werte aus Ihrem Suchfeld erhalten. Tatsächlich möchten Sie benachrichtigt werden, wenn die Suchaktion abgeschlossen ist.

Also würde ich so etwas versuchen, vorausgesetzt, die searchImage führt tatsächlich die Suche durch und gibt eine beobachtbare Variable zurück:

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 finden Sie Informationen zur Verwendung des Operators flatMap:

5
Thierry Templier

Ich hoffe, dies könnte dazu führen, dass einige Leute Angular2-Formulare besser verstehen. Angular hat zwei verschiedene Ansätze zum Erstellen von Formen (Reaktiv- und Vorlagenform). Wenn Sie sich dessen nicht bewusst sind, kann dies zu unordentlichen Apps führen.

valuesChages ist eine Eigenschaft der Direktive NgModel und der Klasse FormControl (beachten Sie dies).

Die reaktiven Ansätze verwenden denReactiveFormsModule import(your.module.ts):

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

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

Auf diese Weise können Sie die Eigenschaft [(formControl)] in Ihren Formularsteuerelementen (template.component.html) verwenden.

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

Template-gesteuert angesprochen (your.module.ts):

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

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

Dieser Ansatz hat seine eigenen Eigenschaften für das Formularsteuerelement ngModel (your.template.ts):

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