私のイオンアプリでイオン

Question

でhttp.getデータによってフィルタリングするイオン検索バーを使用して、私は私のhome.tsで次のようにあります。

<ion-content> 
    <ion-searchbar [(ngModel)]="searchGameTitleString" (input)="searchGameTitle($event)" placeholder="Search"></ion-searchbar> 
    <ion-list> 
     <button ion-item *ngFor="let gameTitle of gameTitles"> 
      {{gameTitle}} 
     </button> 
    </ion-list> 
</ion-content> 

誰かが私を助けることができます：どのように私が手に私のhttpでVAR「gameTitles」の値で上部の空の配列「gameTitles」を置き換えることができますか？

console.log(gameTitles); 

は確かにそうHTTP GETが動作しているようです...私のコンソールで

["game one", "game two", "game three"] 

を与えません。

私はこのことについて何か助けてくれてありがとう - 私は何の成功もなしに多くの方法を試した。ここでは、さらなる研究の後

Answer 1

は私のために働いていたものです：

home.htmlの

... home.ts上

<ion-content> 
    <ion-searchbar (ionInput)="getTitles($event);" [debounce]="500" placeholder="Suchen..." ></ion-searchbar> 
    ... 
    <ion-list> 
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)"> 
     {{item.title.rendered}} 
    </button> 
    </ion-list> 
</ion-content> 

...

this.http.get('someurlhere').map(res => res.json()).subscribe(data => { 
    this.posts = data; 
    this.initializeItems(); 
    console.log(this.posts); 
    loadingPopup.dismiss(); 
}); 

getTitles(ev: any) { 
    this.initializeItems(); 
    // set val to the value of the searchbar 
    let val = ev.target.value; 
    // if the value is an empty string don't filter the items 
    if (val && val.trim() != '') { 
    this.items = this.items.filter((item) => { 
     return (item.title.rendered.toLowerCase().indexOf(val.toLowerCase()) > -1); 
    }) 
    } 
} 

initializeItems() { 
    console.log('initialized all items'); 
    this.items = this.posts; 
}