使用搜索栏过滤 Firebase 列表时出错答案

【问题标题】：Errors when filtering Firebase list using search bar使用搜索栏过滤 Firebase 列表时出错
【发布时间】：2019-06-08 00:45:35
【问题描述】：

我有一个 ion-list，其中包含来自 firestore 的数据。我正在尝试在此列表中搜索数据，但是由于未定义的错误，我无法过滤我的项目列表：Cannot read property 'toLowerCase' of undefined 由于我是 ionic 新手，我不确定我应该过滤哪些数据。

home.html

<ion-content padding>
<ion-searchbar placeholder="Filter Items" (ionInput)="filterItems($event)</ion-searchbar>
<ion-list>
<ion-item text-wrap *ngFor='let user of users'>
  <h2><strong>{{ user.name }}</strong></h2>
  <h5><strong>Phone:</strong> {{ user.phone}}</h5>
  <h5><strong>Address:</strong> {{ user.street}}, {{ user.suburb}}, {{ user.city}} {{ user.postcode}}</h5>

  <button ion-button color='secondary' (click)='updateDocument(user)'>Update this record</button>
    </ion-item>
     </ion-list>
</ion-content>

home.ts

private _COLL   : string = "users";
private _CONTENT    : any;
public users        : any;

constructor(public navCtrl  : NavController,
           private _DB     : DatabaseProvider,
           private _ALERT  : AlertController)
{
  this._CONTENT = {
     id          : "",
     name        : "",
     phone       : "",
     street      : "",
     suburb      : "",
     city        : "",
     postcode    : ""
  };
}

ionViewDidEnter()
{
  this.retrieveCollection();
}

retrieveCollection() : void
{
  this._DB.getDocuments(this._COLL)
  .then((data) =>
  {
     this.users = data;
  })
  .catch();
}

filterItems(ev: any) {
  debugger;
  this.retrieveCollection();
  let val = ev.target.value;

  if (val && val.trim() !== '') {
    this.users.filter(function(user) {
      return user.name.toLowerCase().includes(val.toLowerCase());
    });
  }
}

似乎是filterItems() 中的function(user) 未定义，但我不确定我应该在这里放什么。我想根据用户name进行过滤

【问题讨论】：

您在调用retrieveCollection() 后是否对用户进行了控制台登录？你确定数据格式正确吗？

标签： angular firebase ionic-framework ionic3 google-cloud-firestore

【解决方案1】：

检查您的users 数组的格式是否正确。我可以在您的 html 中看到错误。 ion-searchbar 没有正确关闭。

<ion-searchbar placeholder="Filter Items" (ionInput)="filterItems($event)"> 
</ion-searchbar>

见我的stackblitz demo here.

【讨论】：