使用离子搜索栏通过http.get来过滤离子

Question

以我离子应用数据，我已经在我的home.ts以下：

export class HomePage { 

    itemsInitial = []; //initialize your itemsInitial array empty 
    items = []; //initialize your items array empty 
    gameTitlesInitial = []; //initialize your itemsInitial array empty 
    gameTitles = []; //initialize your items array empty 

    searchGameTitleString = ''; // initialize your searchItemsString string empty 

    constructor(http: Http) { 
    http.get('http://localhost/wordpress-templates/wordpress/index.php/wp-json/wp/v2/business/') 
    .map(res => res.json()) 
    .subscribe(data => { 
     this.itemsInitial = data; 
     this.items = data; 
     var gameTitles = this.items.map(function (el) { 
     return el.title.rendered; 
     }); 
     console.log(gameTitles); 
    }); 
    } 

    searchGameTitle(searchbar) { 
      // reset items list with initial call 
      this.gameTitles = this.gameTitlesInitial; 
      // set q to the value of the searchbar 
      var q = searchbar.target.value; 

     // if the value is an empty string don't filter the items 
     if (q.trim() == '') { 
      return; 
     } 

     this.gameTitles = this.gameTitles.filter((v) => { 
      if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) { 
       return true; 
      } 
      return false; 
     }) 
    } 

} 

....和我home.html的以下内容：

<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> 

有人可以帮助我：我怎样才能更换空阵“gameTitles”在使用var在我的HTTP“gameTitles”得到的值顶部？

console.log(gameTitles); 

确实给我

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

在控制台

...这样的HTTP GET似乎工作。

我非常感谢任何帮助 - 我尝试了很多方法，但没有取得任何成功。

Answer 1

这里经过进一步的研究是为我工作：

上home.html的...

<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> 

上home.ts ...

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; 
}