angular - 无法读取 ionic 搜索栏中未定义错误的属性 'toLowerCase'？

Question

我正在尝试通过以下方式实现 ionic 搜索栏

我的 HTML 页面是

 <ion-searchbar (ionInput)="getFilteredItems($event)"></ion-searchbar>
   <button ion-item *ngFor="let patient of surveyPatients | async" (click)="showPatientData(patient)">{{patient.name}} - {{patient.age}} - {{patient.idCardNumber}}</button>

对应的ts文件，

 surveyPatients:any;
getFilteredItems(ev: any) {
    this.initializeSurveyPatients();

    let val = ev.target.value;
    alert(val);
    console.log(this.surveyPatients.length);
    if (val && val.trim() != '') {
      this.surveyPatients = this.surveyPatients.filter((item) => {
        //alert(item.name);
        return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }


initializeSurveyPatients() {

        this.surveyPatients = this.afoDatabase.list('/SurveyPatients',
      {
        query:{
              orderByChild: 'district',
              equalTo: 'Nalgonda '
            }
      }

      );


  }

当我看到 alert(val) 时，我得到了在搜索框中输入的任何内容。但是当我尝试 console.log(this.surveyPatients.length); 时，我变得不确定。这就是为什么我收到 Cannot read property 'toLowerCase' of undefined 错误的原因。

在构造函数中，我正在运行 this.initializeSurveyPatients(); 因此我能够在页面加载时看到前端的数据。

为什么我无法读取 getFilteredItems 方法中的集合 this.surveyPatients？

更新代码

    initializeSurveyPatients() {

            this.afoDatabase.list('/SurveyPatients',
          {
            query:{
                  orderByChild: 'district',
                  equalTo: 'Nalgonda '
                }
          }

          ).subscribe(snap => {

          this.surveyPatients = snap;

        });
 getFilteredItems(ev: any) {

    //this.initializeItems();
    this.initializeSurveyPatients();

    let val = ev.target.value;
    console.log(this.surveyPatients.length);

    if (val && val.trim() != '' ) {

      this.surveyPatients = this.surveyPatients.filter((item) => {
               return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
       console.log(this.surveyPatients.length);
        }
      }


      }

对应的html代码

<button ion-item *ngFor="let patient of surveyPatients" (click)="showPatientData(patient)">{{patient.name}} - {{patient.age}}
- {{patient.idCardNumber}}</button>

注意:我删除了异步过滤器

在这种情况下，我能够在 getFilteredItems 中按预期获得 console.log(this.surveyPatients.length); 过滤前和过滤后的正确值方法。这证实了我们过滤器正在工作。

唯一的问题是 UI 中的值在过滤后没有更新。

Answer 1

因为它是可观察的，所以您需要订阅它以返回一个值。

注意:根据需要重构代码。这只是一个概念。

this.afoDatabase.list('/SurveyPatients',
      {
        query:{
              orderByChild: 'district',
              equalTo: 'Nalgonda '
          } }
      ).subscribe(snap => {

      this.surveyPatients = snap;//here

    });