Проблема с фильтрацией данных из пожарного магазина в приложение ioni c

Question

Я пытаюсь создать панель поиска в приложении ioni c для фильтрации коллекции в базе данных Firebase Cloud Firestore. Однако я не могу установить sh соединение. Я поместил учетные данные в environment.ts и environment.prod.ts, а затем ввел ключ firebase в приложение module.ts

Код для панели поиска работает нормально, и панель поиска загружается, однако никаких результатов из коллекции не отображаются. печатается. Коллекция просто называется 'name'

. Я приложу приведенный ниже код, если кто-либо обнаружит какие-либо проблемы, пожалуйста, сообщите мне.

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.goalName}} </ion-label>
  </ion-item>

  </ion-list>

  </ion-content>

homepage.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(`name`).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.goalName && searchTerm){
    if(currentGoal.goalName.toLowerCase().indexOf(searchTerm.toLowerCase())>-1){
      return true; 
    }
    return false; 
  }

   });
  }
}

environment.ts

export const environment = {
  production: false,
  firebaseConfig:{ credentials are in here 

app.module.ts, где вызывается firebaseconfig из среды. с учетными данными.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFireStorageModule ],


  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}