创建一个离子搜索栏以从 Firestore 云数据库中收集数据答案

【问题标题】：creating a ionic search bar to collect data from firestore cloud database创建一个离子搜索栏以从 Firestore 云数据库中收集数据
【发布时间】：2020-04-12 19:52:47
【问题描述】：

我正在做一个离子项目，我正在尝试创建一个搜索栏，用于过滤来自 Firestore 云数据库中的集合的数据。该集合称为竞赛

我通过将我的凭据添加到 environment.ts 和 module.app.ts 来创建与 firebase 和 ionic 的连接。

当我对搜索栏进行编码时，我似乎无法从 firestore 数据库中检索数据。我无法判断它是否归结为 ts 文件中的编码错误，或者是否没有正确建立连接

我会把homepage.html和homepage.ts的代码留在下面

如果有人知道为什么这不起作用，我将不胜感激。

我正在使用 ionic 5 和 angular 9

主页.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; 
  }

   });
  }
}

【问题讨论】：

标签： angular firebase ionic-framework google-cloud-firestore

【解决方案1】：

在您的 HTML 中，您的 ionItem 有目标列表，但您没有在 .ts 文件中声明目标列表，请更改 HTML 中的变量。

<ion-item *ngFor="let item of searchList">
    <ion-label>{{item.collection}} </ion-label>
</ion-item>

【讨论】：