Angularjs Angular 2 ngModel值使用ionic更新不够快

我有一个像这样的

离子搜索栏

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

export class SearchPage {
  searchQuery: string; 

  constructor(){}

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

问题是，如果我更改值太快并按Enter键，

searchQuery

的值不会更新。例如，如果我搜索“test”并等待两秒钟，它就会工作。如果我搜索“testing”，然后快速键入并立即按Enter键，则该值仍然是“test”。现在，我知道这听起来很奇怪，但它真的发生了

你知道为什么我一键入内容，值就没有改变吗

---

谢谢

在Html中尝试此事件更改

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

---

您可以采取以下措施来改进

搜索栏的处理方式：

在
页面.html
中：

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

通过这样做，我们只会在输入发生更改（
this.searchQueryControl.valueChanges
）和1秒内没有其他更改（
.debounceTime（1000）
）时运行代码。
distinctUntilChanged（）
允许我们在值与上次运行时不同的情况下运行代码。因此，如果用户键入“asd”，按backspace键，然后再次键入结尾的“d”，则不会发生任何事情。
我是这样做的，基于：

说明：

这是不言自明的，但在这里。
#searchBar
为元素创建一个“钩子”（有点像“self”或“this”，但命名为）。然后，我们使用
ion searchbar
中的属性
value
将其传递给我们的函数。最后一件事是修改
[debounce]
属性，使其更新更快（但当人们写得快时会触发更多次-谨慎使用）。
此解决方案可行，但唯一的问题是它稍微改变了行为。例如，在android设备上，我通常会按键盘上的搜索按钮开始搜索（keyup.enter）。我觉得这有点尴尬（只是我个人的想法）。谢谢你的解决，我会考虑的！这应该行得通，但看起来像是一个解决办法。我现在正试图找到一个真正的解决办法。
<ion-searchbar primary hideCancelButton [(ngModel)] = "searchQuery" [ngFormControl]="searchQueryControl"></ion-searchbar>

// 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();
            }
      });

    //...
}

<ion-searchbar #searchBar [debounce]="50" (ionChange)="search(searchBar.value)">
</ion-searchbar>

search(value: string) {
    // do something with value
}