角2 ngModel值沒有更新速度不夠快使用離子

我有一個ion-searchbar看起來像這樣角2 ngModel值沒有更新速度不夠快使用離子

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

和searchQuery在我的打字稿文件中定義這樣

export class SearchPage { 
    searchQuery: string; 

    constructor(){} 

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

的問題是，如果我更改值太快，並按Enter鍵，則searchQuery的值不會更新。例如，如果我搜索「測試」，並等待兩秒鐘，它將工作。如果我然後搜索「測試」，然後快速輸入並立即按Enter鍵，則該值仍然是「測試」。現在，我知道這聽起來很奇怪，但它確實發生了！

任何想法爲什麼只要鍵入內容時值不會改變？

謝謝

來源

2016-06-30 Marc-André Therrien

在HTML中嘗試這個事件改變

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

即使check here也許這幫助

在TS修剪值

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

來源

2016-06-30 16:38:45 mayur

這應該工作，但它看起來像一個解決方法。我正試圖爲現在找到一個真正的解決方案。 –

的東西，你可以做些什麼來改善正在處理search bar的方式是：

在你page.html：

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

而在你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(); 
      } 
     }); 

    //... 
}

通過這樣做，我們將只運行當輸入改變了代碼（this.searchQueryControl.valueChanges），而當1秒內沒有發生其他變化（.debounceTime(1000)）。 distinctUntilChanged()允許我們運行代碼，如果該值與上次運行時不同。所以如果用戶輸入'asd'，點擊退格鍵，然後重新輸入結尾'd'，什麼也不會發生。

來源

2016-06-30 16:40:37 sebaferreras

該解決方案有效，但唯一的問題是它會稍微改變行爲。例如，在Android設備上，我通常會按下鍵盤上的搜索按鈕以開始搜索（keyup.enter）。我認爲這有點尷尬（只是我個人的想法）。感謝解決方案，我會考慮它！ –

角2 ngModel值沒有更新速度不夠快使用離子

回答

相關問題