Question

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

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());
    });
  }
}

看来function(user)中的filterItems()尚未定义，但我不确定应该在此处输入什么。我想根据用户name

进行过滤

Answer 1

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

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

看到我的stackblitz demo here.

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

1 个答案: