Question

我有ion-searchbar看起来像这样

<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的值不会更新。例如，如果我搜索＆＃34; test＆＃34;我等了两秒才能奏效。如果我然后搜索＆＃34;测试＆＃34;然后我快速输入并按Enter键，值仍为＆＃34; test＆＃34;。现在，我知道这听起来很奇怪，但它确实发生了！

我输入内容后，为什么价值不会改变的任何想法？

谢谢

Answer 1

在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(.....)

Answer 2

您可以采取哪些措施来改善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'，则不会发生任何事情。

Answer 3

基于documentation for ion-searchbar，这就是我的做法：

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

并在TS文件中：

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

说明：

这很不言自明，但是在这里。 #searchBar为元素创建一个“钩子”（某种“自我”或“ this”，但已命名）。然后，我们使用value中的属性ion-searchbar将其传递给函数。最后一件事是修改[debounce]属性以使其更新更快（但是当人们快速书写时将触发更多的时间-谨慎使用）。

角度2 ngModel值使用离子不能更快地更新

3 个答案: