<ion-searchbar [(ngModel)]="searchQuery" (input)="searchItem($event)"></ion-searchbar>
上記の場合はキーを押下時にsearchItemが呼ばれます。既にあるリストをフィルタする場合などは良いのですが、サーバーに呼び出しを行いたい場合は頻繁に負荷をかけることになるのでエンターを押した場合のみ呼び出したい場合もあると思います。
inputではなくsearchイベントを使うことで解決できます。(ドキュメントには未記載)
<ion-searchbar [(ngModel)]="searchQuery" (search)="searchProduct($event)" ></ion-searchbar>
input,searchイベント共に呼ばれる関数内で モデルとしてバインドされているsearchQueryを使用してはいけないようです。関数が呼ばれた時点ではまだ値の同期が終わっていない場合がありました。
したがって以下のように関数に渡しているeventから値を取得する必要があります。
inputの場合
searchItem = function(event){
//eventがsearchbarなので
var query = event["value"];
}
searchの場合
searchItem = function(event){
//eventはEventオブジェクトなので
var query = event["target"]["value"];
}
0 件のコメント:
コメントを投稿