Ionic framework 使用离子搜索栏过滤http.get中的数据

在我的Ionic应用程序中，我的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;
      })
  }

}

…以及my 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>

确实给了我

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

在控制台中。。。因此，http get似乎可以工作

---

我非常感谢您对我的帮助，我已经尝试了很多方法，但都没有成功。

经过进一步研究，以下是对我有效的方法：

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

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