Question

我正在尝试以下列方式实施离子搜索栏

我的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）; 时，我得到了未定义。这就是为什么我无法读取属性＆to toLowerCase＆＃39;未定义错误。

在构造函数中，我正在运行 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

由于这是observable，您需要subscribe才能返回值。

注意：根据需要重构code。这只是一个概念。

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

      this.surveyPatients = snap;//here

    });

Answer 2

获取此错误的一个原因可能是您尝试执行此功能时未定义item.name。

尝试使用以下保护措施：

if item.name.type === 'string'

您也可以尝试使用Elvis运算符：

item.name?.toLowerCase()

无法阅读属性＆to toLowerCase＆＃39;离子搜索栏中未定义的错误？

2 个答案: