Ionic 3 - Filtern eine komplexe Reihe

Question

ich von einem json ein Array versuchte filtring mit der Struktur kommt

{ID: "2031", title: "title 1", image: "http://wwwsite.com/im.jpg", url: 
     "url...", Goal: "3000000", …} 

mein Array-Name 'loadedprojects' und hier ist th Filterfunktion:

getItems(ev: any) { 
    // Reset items back to all of the items 
     this.getloadedproject(); 

    // 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.loadedprojects = this.loadedprojects.filter((project) => { 
     console.log(this.loadedprojects); 
     return (project.title.indexOf(val) > -1); 
     }) 
    } 
    } 

auf hTML-Seite:

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> 

Vorschau Seite html:

<ion-card *ngFor="let project of loadedprojects"> 
     <img src="{{project.image}}" /> 
     <ion-card-content> 
     <ion-card-title>{{ project.title }}</ion-card-title> 
     <p>{{ project.country }}</p> 
     </ion-card-content> 

     <ion-grid > 
     <ion-row> 
      <ion-col col-6> {{ 'Goal' | translate }}</ion-col> 
      <ion-col col-6 class="value-amount"> {{ project.Goal | number }} رق </ion-col> 
     </ion-row> 

     <ion-row> 
      <ion-col col-6> {{ 'Donations' | translate }}</ion-col> 
      <ion-col col-6 class="value-amount"> {{ project.Donation | number }} رق </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col col-6> {{ 'Donnors' | translate }}</ion-col> 
      <ion-col col-6 class="value-amount"> {{ project.nbr_donnors }} </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col col-12> 
      <button ion-button block class="donate_button" (click)="donation_options(project.ID, project.title, project.image)">{{ 'Donate' | translate }}</button> 
      </ion-col> 
     </ion-row> 
     </ion-grid> 



    </ion-card> 

Das Suchsystem nicht funktioniert für mich

Answer 1

Sie brauchen nicht [(ngModel)]="keyword" zu verwenden .Sie können wie unten dargestellt versuchen.

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>