Ionic 4, Firebase и панель поиска - PullRequest
Новая
       19

Ionic 4, Firebase и панель поиска

0 голосов
/ 18 марта 2019

Мне нужна помощь с использованием панели поиска, чтобы найти имена из Firebase.Я успешно смог перечислить все имена из Firebase, но у меня возникли проблемы с поиском Firebase по определенному имени.

Структура данных Firebase: 

myApplicaton
    infos
      1
       info_name:Name1
      2 
       info_name: Name2

home.page.html 

<ion-content>
    <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <ion-list>
    <ion-item-sliding *ngFor="let info of infos">
      <ion-item detail lines="full" routerLink="/detail/{{info.key}}">
        <ion-icon name="desktop" slot="start"></ion-icon>
        {{info.info_name}}
      </ion-item>
    </ion-item-sliding>
  </ion-list>
</ion-content>

home.page.ts- Я вижу имя, которое я ввожу в строку поиска с помощью console.log. 

export class HomePage {

  infos = [];
  ref = firebase.database().ref('infos/');

  public infosList:Array<any>;
  public loadedInfoList:Array<any>;

  constructor(private route: ActivatedRoute, public router: Router, public alertController: AlertController) {
    this.ref.on('value', resp => {
      this.infos = [];
      this.infos = snapshotToArray(resp);

      this.infosList.forEach(info =>{
        this.infos.push(info.val());
        return false;

      });
    });
    this.infosList = this.infos;
    this.loadedInfoList = this.infos;

  }

  initializeItems(){
    this.infosList = this.loadedInfoList;
  }

   getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // // set q to the value of the searchbar
    // var q = searchbar.srcElement.value;
    let q = ev.target.value;

    // if the value is an empty string don't filter the items
    if (!q) {
      return;
    }

    this.infosList = this.infosList.filter((info) => {
      if(info.info_name && q) {
        if (info.info_name.toLowerCase().indexOf(q.toLowerCase()) > -1) {
          return true;
        }
        return false;
      }
    });

    console.log(q, this.infosList.length);

  }
}

export const snapshotToArray = snapshot => {
  let returnArr = [];

  snapshot.forEach(childSnapshot => {
      let item = childSnapshot.val();
      item.key = childSnapshot.key;
      returnArr.push(item);
  });

  return returnArr;
}
...