Question

我尝试过来一个带有结构

的json的数组

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

我的阵列名称是＆＃39; loadedprojects＆＃39;这是过滤功能：

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

在html页面上：

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

预览页面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>

搜索系统对我不起作用

Answer 1

您无需使用[(ngModel)]="keyword"。您可以尝试如下所示。

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

离子3 - 过滤复杂的数组

1 个答案: