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

Question

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

首页.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>

首页

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进行过滤

Answer 1

检查您的users数组是否正确形成。我可以在您的 html 中看到错误。 ion-searchbar未正确关闭。

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

在此处查看我的堆栈闪电战演示。