离子 3 - 过滤复杂数组

Question

>我尝试过滤来自具有结构的 json 的数组

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

我的数组名称是"加载项目"，这里是过滤函数：

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>