Angular 2 ngModel Wert nicht schnell genug, um die Aktualisierung unter Verwendung von ionischen

Question

Ich habe ein ion-searchbar die

<ion-searchbar [(ngModel)]="searchQuery" (keyup.enter)="search();"></ion-searchbar> 

und die searchQuery wie diese aussieht, ist in meiner Typoskript-Datei wie diese

export class SearchPage { 
    searchQuery: string; 

    constructor(){} 

    search() { 
    this.service.search(this.searchQuery).subscribe(
    data => this.searchResults = data, 
    error => { 
     //something 
    },() => { 
     //something 
    } 
    ); 
    } 
} 

definiert ist Das Problem ist, dass Wenn ich den Wert zu schnell ändere und die Eingabetaste drücke, wird der Wert searchQuery nicht aktualisiert. Zum Beispiel, wenn ich "Test" suche und ich zwei Sekunden warte, wird es funktionieren. Wenn ich dann "Testen" suche und es schnell eintippe und sofort Enter drücke, ist der Wert immer noch "test". Nun, ich weiß, das klingt komisch, aber es passiert wirklich!

Irgendwelche Ideen, warum der Wert nicht geändert wird, sobald ich etwas eintippe?

Danke

Answer 1

in Html versuchen diese Veranstaltung ändern

<form [ngFormModel]="searchForm" (ngSubmit)="search()"> 
     <ion-searchbar [(ngModel)]="searchQuery" (keyup)="search()"></ion-searchbar> 
     <button type="submit" block>Submit</button> 
    </form> 

Auch check here könnte diese Hilfe

In ts den Wert trimmen

this.service.search(this.searchQuery.trim()).subscribe(.....) 

Answer 2

Etwas, das Sie tun können, verbessern die Art und Weise, wie die search bar behandelt wird ist:

In Ihrem page.html:

<ion-searchbar primary hideCancelButton [(ngModel)] = "searchQuery" [ngFormControl]="searchQueryControl"></ion-searchbar> 

Und in Ihrem page.ts:

// Remember to import these things: 
import {FORM_DIRECTIVES, Control} from 'angular2/common'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 

constructor (...) { 
    //... 
    this.searchQuery = ''; 
    this.searchQueryControl = new Control(); 
    //... 

    this.searchQueryControl 
     .valueChanges 
     .debounceTime(1000) 
     .distinctUntilChanged() 
     .subscribe(text => { 

      if(text !== '') { 
       this.searchQuery = text; 
       this.search(); 
      } 
     }); 

    //... 
} 

Dadurch, dass wir würden nur ausgeführt hat, den Code, wenn der Eingang geändert (this.searchQueryControl.valueChanges), und wenn Innerhalb von 1 Sekunde wurde keine weitere Änderung vorgenommen (.debounceTime(1000)). Die distinctUntilChanged() ermöglichen es uns, den Code auszuführen, wenn der Wert anders ist als beim letzten Mal. Wenn der Benutzer also "asd" eingibt, die Rücktaste drückt und dann die Endung "d" erneut tippt, passiert nichts.