title: Cannot read property 'toLowerCase' of undefined Error in ion search bar?
body: <p>I am trying to implement ion search bar in the following way</p>
  
  <p>My HTML page is</p>
  
  <pre><code> &lt;ion-searchbar (ionInput)="getFilteredItems($event)"&gt;&lt;/ion-searchbar&gt;
     &lt;button ion-item *ngFor="let patient of surveyPatients | async" (click)="showPatientData(patient)"&gt;{{patient.name}} - {{patient.age}} - {{patient.idCardNumber}}&lt;/button&gt;
  </code></pre>
  
  <p>Corresponding ts file,</p>
  
  <pre><code> surveyPatients:any;
  getFilteredItems(ev: any) {
      this.initializeSurveyPatients();
  
      let val = ev.target.value;
      alert(val);
      console.log(this.surveyPatients.length);
      if (val &amp;&amp; val.trim() != '') {
        this.surveyPatients = this.surveyPatients.filter((item) =&gt; {
          //alert(item.name);
          return (item.name.toLowerCase().indexOf(val.toLowerCase()) &gt; -1);
        })
      }
    }
  
  
  initializeSurveyPatients() {
  
          this.surveyPatients = this.afoDatabase.list('/SurveyPatients',
        {
          query:{
                orderByChild: 'district',
                equalTo: 'Nalgonda '
              }
        }
  
        );
  
  
    }
  </code></pre>
  
  <p>When I see <strong>alert(val)</strong> I am getting the what ever the input that is entered in the search box. But when I try <strong>console.log(this.surveyPatients.length);</strong> I am getting undefined.
  That is the reason why I am getting <strong>Cannot read property 'toLowerCase' of undefined</strong> Error.</p>
  
  <p>In the constructor I am running  <strong>this.initializeSurveyPatients();</strong> Hence I am able to see the data in the front end on page load.</p>
  
  <p>Why I am not able to read the collection this.surveyPatients inside the <strong>getFilteredItems</strong> method?</p>
  
  <p><strong><em>Updated Code</em></strong></p>
  
  <pre><code>    initializeSurveyPatients() {
  
              this.afoDatabase.list('/SurveyPatients',
            {
              query:{
                    orderByChild: 'district',
                    equalTo: 'Nalgonda '
                  }
            }
  
            ).subscribe(snap =&gt; {
  
            this.surveyPatients = snap;
  
          });
   getFilteredItems(ev: any) {
  
      //this.initializeItems();
      this.initializeSurveyPatients();
  
      let val = ev.target.value;
      console.log(this.surveyPatients.length);
  
      if (val &amp;&amp; val.trim() != '' ) {
  
        this.surveyPatients = this.surveyPatients.filter((item) =&gt; {
                 return (item.name.toLowerCase().indexOf(val.toLowerCase()) &gt; -1);
        })
         console.log(this.surveyPatients.length);
          }
        }
  
  
        }
  </code></pre>
  
  <p>Corresponding html code</p>
  
  <pre><code>&lt;button ion-item *ngFor="let patient of surveyPatients" (click)="showPatientData(patient)"&gt;{{patient.name}} - {{patient.age}}
  - {{patient.idCardNumber}}&lt;/button&gt;
  </code></pre>
  
  <p>Note: I removed async filter</p>
  
  <p>In this case, I am able to get correct values for <strong>console.log(this.surveyPatients.length);</strong> before filter and after filter as expected, inside <strong>getFilteredItems</strong> method. Which confirms us the filter is working. </p>
  
  <p>The only issue is values In the UI are not updating after the filter.</p>