Ionic searchbar not returning results

#1

I am trying to implement filter based on data entries.userEmail populated from Firebase.

.ts file,

  directoryEntries: Observable<any[]>;

  constructor(public navCtrl: NavController, public firebase: AngularFireDatabase) {
    this.directoryEntries = this.firebase.list('/directory').valueChanges();
  }

  getItems(ev: any) {
    this.directoryEntries = this.firebase.list('/directory').valueChanges();
    let val = ev.target.value;

    if (val && val.trim() != '') {
      this.directoryEntries.forEach((entries) => {
        return entries.filter((entry) => {
          console.log(entry.userEmail.toLowerCase().indexOf(val.toLowerCase()) > -1);
          return (entry.userEmail.toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
      })
    }
  }

.html file,

<button ion-item *ngFor="let entry of directoryEntries | async" [navPush]="logPage" [navParams]="entry">

According to console.log, boolean results are accurate. It is not updating/refreshing my view though.
Any help is appreciated! Thanks!

#2

Got it fixed! Did this instead,

  listing = [];

  constructor(public navCtrl: NavController, public firebase: AngularFireDatabase) {
    this.directoryEntries = this.firebase.list('/directory').valueChanges();
    this.initializeListing();
  }

  initializeListing() {
    this.directoryEntries.forEach(entries => {
      this.listing = entries;
    });
  }

  getItems(ev: any) {
    this.initializeListing();

    let val = ev.target.value;

    if (val && val.trim() != '') {
      this. directoryEntries.forEach((entries) => {
        this.listing = entries.filter((entry) => {
          return (entry.userEmail.toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
      })
    }
  }

Also, I had to remove async pipe in html file.

<button ion-item *ngFor="let entry of listing" [navPush]="logPage" [navParams]="entry">

Let me know if you have a better solution!