создание поисковой панели ioni c для сбора данных из облачной базы данных firestore

Question

Я занимаюсь проектом ioni c, в котором я пытаюсь создать панель поиска, которая фильтрует данные из коллекции в облачной базе данных firestore. Коллекция называется Competitions

. Я установил соединение с firebase и ioni c, добавив свои учетные данные в environment.ts и module.app.ts ретроспективно.

Когда я go кодирую строку поиска, я не могу получить данные из базы данных пожарного магазина. Я не могу сказать, если это из-за ошибки кодирования в файле TS или если соединение не устанавливается правильно

Я оставлю код для домашней страницы. html и код homepage.ts ниже

если у кого-то есть идеи, почему это не работает, я был бы признателен за любую помощь.

Я использую ioni c 5 и angular 9

HOMEPAGE. HTML

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-searchbar showCancelButton (ionInput)="filterList($event)"> </ion-searchbar>
  <ion-list>
  <ion-item *ngFor="let item of goalList">
    <ion-label>{{item.collection}} </ion-label>
  </ion-item>

  </ion-list>

  </ion-content>

HOME.PAGE.TS

import { Component,OnInit } from '@angular/core';
import {AngularFirestore} from '@angular/fire/firestore';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
  public searchList: any[];
  public loadedsearchList: any[];


  constructor(private firestore:AngularFirestore) {}

  ngOnInit(){
    this.firestore.collection(`competition`).valueChanges().subscribe(searchList => {
      this.searchList = searchList;
      this.loadedsearchList = searchList;
    });
  }
   initializeItems():void {
     this.searchList= this.loadedsearchList;
   }

   filterList(evt){
     this.initializeItems();
     const searchTerm = evt.srcElement.value; 
     if(!searchTerm){
       return; 
     }


   this.searchList= this.searchList.filter(currentGoal =>{
  if(currentGoal.location && searchTerm){
    if(currentGoal.location.toLowerCase().indexOf(searchTerm.toLowerCase())>-1){
      return true; 
    }
    return false; 
  }

   });
  }
}