UI values are not updating in ngFor based on ion search


#1

My html code


  <ion-searchbar (ionInput)="getFilteredItems($event)"></ion-searchbar>

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

Corresponding ts code

surveyPatients:any;

getFilteredItems(ev: any) {    
    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); 
    }
  }


initializeSurveyPatients() {


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

      ).subscribe(snap => {

      this.surveyPatients = snap;
    });


  }

When I see value of console.log(this.surveyPatients.length); In getFilteredItems() method I am getting expected values before and after filter, Which confirms us that filter is working fine.

But after the filter operation the list in the UI is not updating accordingly.

I am not sure what I am missing to add.

Please help me in resolving this issue.