Keyup Ereignis Feuer multipetime

Question

Momentan arbeite ich an Angular 4 App. In meiner Komponente Html habe ich ein Textfeld. Wenn der Benutzer zuerst irgendwas eingibt, möchte ich einen API-Aufruf durchführen, um einige Daten zu erhalten.

Das Problem ist, wenn User Typ 'A' dann funktioniert es gut und Aufruf von API. Aber wenn Benutzer "ABC" eingeben, macht es API-Aufruf 3 Mal. Anstatt einen API-Aufruf für jeden Brief zu machen, sollte nur ein Anruf getätigt werden.

Bitte schlagen Sie eine Lösung vor.

Komponente HTML:

<input id="inputbox" (keyup)="keyUp($event)"/> 

Komponente:

data: string[] 

keyUp(event: any) { 
this.loadDataApiCall(); 
} 

loadDataApiCall() { 
// calling api to load data. 
//fill data into 
} 

Kann ich dieses Problem mit Hilfe von RXjs in Winkel lösen 4

Answer 1

Wenn Sie nur eine API möchten, rufen Sie die verwenden können, blur Ereignis, das ausgegeben wird, wenn die Steuerung den Fokus verliert:

<input id="inputbox" (blur)="keyUp($event)"/> 

Answer 2

Try this:

keyUp(event: any) { 
this.loadDataApiCall(); 
event.stopImmediatePropagation(); 
} 

Answer 3

Sie sollten wahrscheinlich eine timeout auf Ihren Anruf hinzufügen und es jedes Mal, löschen sie ausgelöst wird, so dass nur der letzte Aufruf aufgerufen wird.

Dies bedeutet natürlich, dass der Anruf 100ms nach dem Beenden der Eingabe beendet wird. Auch wenn er "a" tippt und nach einer Weile "bc" tippt, werden zwei Anrufe getätigt. Natürlich können Sie die Verzögerung erhöhen, um Ihre Anforderungen zu erfüllen.

Answer 4

Observable.fromEvent(yourDomElement, 'keyup').auditTime(100).subscribe(()=>{ 
     doSomething(); 
    }); 

Answer 5

der richtige Weg, dies zu implementieren ist durch das Ereignis zu registrieren und die API nach einiger Zeit beim Speichern des neuesten Wertes aufrufen und prüfen, ob der zuletzt ermittelte Wert des neuesten registrierten Wert

so in Ihrem keyup paßt

keyUp(event: any) { 
    this.latestValue = event.target.value; 
    this.registerApiCall(event.target.value); 
} 

Register func

registerApiCall(value){ 
     setTimeout(this.loadDataApiCall.bind(this), 500, value) 
    } 

api cal l

loadDataApiCall(value) { 
    if (this.latestValue == value){ 
    // calling api to load data. 
    //fill data into 
    } 
} 

siehe Arbeitsbeispiel in this plnk

EDIT:.

Observable.fromEvent (yourDomElement, 'keyup') auditTime (100).subscribe (() => { doSomething(); });

von 陈 杨华 ist die RxJs Implementierung, die viel besser aussieht, und hier ist ein working plnkr

Answer 6

Wenn Sie bereit sind, das Ihr Formular reaktiven Formen zu ändern wäre extrem einfach

this.form.get("input").valueChanges.debounceTime(1000).subscribe((value) => {}); 

Reaktive Formulare gibt Ihnen Zugriff auf Observables von Wertänderungen und Statusänderungen. Wir abonnieren grundsätzlich diese Observable, die den Wert jedes Mal ausgibt, wenn sie sich ändert, und wir fügen eine Verzögerung von einer Sekunde hinzu, sodass der Code in unserem Abonnement nicht ausgeführt wird, wenn der Benutzer noch den Wert eingibt und ändert.

Answer 7

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <input type="text" (keyup)='keyUp.next($event)'> 
    </div> 
    , 
}) 
export class App { 
    name:string; 

    public keyUp = new Subject<string>(); 

    constructor() { 
    const subscription = this.keyUp 
     .map(event => event.target.value) 
     .debounceTime(1000) 
     .distinctUntilChanged() 
     .flatMap(search => Observable.of(search).delay(500)) 
     .subscribe(console.log); 
    } 
}