如何在 Ionic 应用中实现过滤 <ion-searchbar>Firebase 数据？

Question

如何在Ionic应用程序中实现搜索栏以过滤Firebase数据？我想实现一个，在用户键入时过滤数据。我无法完成。我看过好几个教程，但仍然无法实现。任何帮助都将不胜感激。

这是我的列表.page.html

<ion-searchbar (ionChange)="search($event.target.value)"></ion-searchbar>
<ion-list class="bg-transparent "  lines="none" *ngFor="let user of usersArrayFiltered" color="none" >
<ion-item color="none"> <ion-card>
<ion-card-content>
<h2>{{user.name}}</h2>
<p>{{user.email}}</p>
<p>₹ {{user.mobile}}</p>
</ion-card-content>
</ion-card>
</ion-item>
</ion-list>
</div>
</ion-content>

这是我的清单

export class HomePage implements OnInit {
UsersArray = [];
usersArrayFiltered =[];
constructor(
private apiService: UserService
) { }
ngOnInit() {
this.fetchBookings();
let bookingRes = this.apiService.getUserList();
bookingRes.snapshotChanges().subscribe(res => {
this.UsersArray = [];
res.forEach(item => {
let a = item.payload.toJSON();
a['$key'] = item.key;
this.UsersArray.push(a as User);
this.usersArrayFiltered = [...this.UsersArray];
})
})
}
search(query) {
if (!query) { // revert back to the original array if no query
this.usersArrayFiltered = [...this.UsersArray];
} else { // filter array by query
this.usersArrayFiltered = this.UsersArray.filter((user) => {
return (user.name.includes(query) || user.email.includes(query) || user.phone.includes(query));
})
}
}
fetchBookings() {
this.apiService.getUserList().valueChanges().subscribe(res => {
console.log('Fetched users list!')
})
}

}

Answer 1

下面是一个基本示例。我会有两个数组——原始数组usersArray，它没有经过过滤，还有一个可修改的数组usersArrayFiltered，它应用了过滤器。您将在HTML中绑定到经过过滤的数组。

在用ngOnOnit挂钩中的数据填充usersArray之后，立即将usersArrayFiltered指定为原始数组的副本。

// just populated usersArray
this.usersArrayFiltered = [...this.usersArray];

现在创建一个将搜索查询作为参数的搜索方法。如果查询是空字符串，则将usersArrayFiltered重新分配为原始usersArray的副本。如果它不是空字符串，则通过仅包括具有包含查询字符串的值的对象，将usersArrayFiltered转换为usersArray的筛选数组。

search(query) {
if (!query) { // revert back to the original array if no query
this.usersArrayFiltered = [...this.usersArray];
} else { // filter array by query
this.usersArrayFiltered = this.usersArray.filter((user) => {
return (user.name.includes(query) || user.email.includes(query) || user.phone.includes(query));
})
}
}

倾听<ion-searchbar>上的值变化，并将其值传递给搜索函数。

<ion-searchbar (ionChange)="search($event.target.value)"></ion-searchbar>

将*ngFor循环绑定到已筛选的数组。

<ion-list *ngFor="let user of usersArrayFiltered">
...
</ion-list>