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

问题描述

如何在Ionic应用程序中实现搜索栏以过滤Firebase数据？我想实现一个，以根据用户输入的内容过滤数据。我无法完成它。我看过一些教程，但仍然无法实现。任何帮助将不胜感激。

这是我的list.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>

这是我的list.page.ts

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!')
    })
  }


}

解决方法

这是一个基本示例。我将有两个数组-原始数组usersArray保持未过滤状态，而可修改数组usersArrayFiltered则应用了过滤条件。您将绑定到HTML中的过滤数组。

在将usersArray挂钩中的数据填充到ngOnOnit之后，立即将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>