2017-10-23 2 views
2

Lesen How to use RxJs distinctUntilChanged? und this, es scheint, dass distinctUntilChanged den Ausgangsstrom ändert, um nur deutliche zusammenhängende Werte bereitzustellen.FormControl.detectchanges - warum distinctUntilChanged verwenden?

Ich meine, dass, wenn derselbe Wert in unmittelbarer Folge ankommt, Sie den Stream im Wesentlichen filtern und nur ein Vorkommen dieses wiederholten Werts erhalten.

Also, wenn ich dies schreibe:

this.myFormControl.valueChanges 
    .debounceTime(1000) 
    .distinctUntilChanged() 
    .subscribe(newValue => { 
    console.log('debounced: ', newValue); 
    }); 

ich keinen Unterschied in der Ausgabe zu sehen:

this.myFormControl.valueChanges 
    .debounceTime(1000) 
    .subscribe(newValue => { 
    console.log('debounced: ', newValue); 
    }); 

ich ein paar Plätze gesehen habe empfehlen distinctUntilChanged verwenden, wenn zu valueChanges auf Formulareingaben abonnieren - Aber verstehe nicht warum.

Es ist eine Eingabe, also wenn der Benutzer schreibt, ändert es sich immer, richtig? Die Werte werden immer unterschiedlich sein. Sie fügen einfach einen zusätzlichen Vorgang hinzu, um die Eingabe ohne Grund zu filtern.

Oder fehlt mir hier etwas?

EDIT

Mit distinctUntilChanged nach meinem ersten Codebeispiel, habe ich eine Formulareingabe mit dem Wert Mr Trump und sorgte dafür, es im Modell gespeichert wurde.

Ich habe dann in das Steuerelement geklickt und eingefügt . Da der Wert derselbe ist, hätte ich erwartet, nichts protokolliert zu sehen - das Steuerelement hat den gleichen Wert wie vorher, also sollte das distinctUntilChanged es ignoriert haben?

EDIT 2

Nach weiter in meinem Test suchen, ist dieses Verhalten, weil ich eine Reihe von AbstractControls verwendet zu sein scheint:

this.itemsControl = <FormArray>this.form.controls['items']; 
... 
this.itemsControl.controls[index].valueChanges... 
seltsam wenn auch ein wenig, dass es ausgelöst wird, wenn noch so

die Wert der Eingabe ist der gleiche, ich rate, ich muss an valueChanges der tatsächlichen Eingabe in diesem Array-Element (eine Formulargruppe) anschließen, und nicht das Array-Element selbst.

EDIT 3

So, nachdem den Code in EDIT 2 die folgenden zu ändern, den gleichen Wert einfügen, der bereits in der Eingangssteuer existiert nicht valueChanges abfeuert (wie erwartet).In EDIT 2 valueChanges wurde auf die gesamten formGroup verhakt, nicht die individuelle Eingangssteuerung (in diesem Fall genannt content):

let fg = this.itemsControl.controls[index]; // get the formGroup 
fg['controls'].content.valueChanges 
    .debounceTime(1000) 
    .distinctUntilChanged() 
    .subscribe(newValue => {...}); 

Antwort

3

debounceTime(1000) Mit der Benutzung nur wir eine Anforderung senden, wenn der Benutzer für 1 Sekunde aufhörte eingeben, während das zweite die Benutzer schreiben können 3 Zeichen sie dann löschen, so dass der Eingangswert nicht seit dem letzten Wunsch geändert hat, aber sie die gleiche Anfrage senden, um zu verhindern, dass Sie .distinctUntilChanged()

this.myFormControl.valueChanges 
     .debounceTime(1000) 
     .distinctUntilChanged() 
     .subscribe(newValue => { 
     console.log('debounced: ', newValue) 
     }); 
+0

Ah ha verwenden können, ist diese Art von offensichtlich, jetzt zeigst du es, danke, dass du dir die Zeit dafür genommen hast! :) – rmcsharry