Angular 如何在ionic 4 firestore中执行搜索/筛选列表

我已经尝试了很多教程，但是我找不到任何关于如何执行搜索功能的解决方案。我想通过一个名为booth的字段在StudentList集合中搜索。如果有人愿意帮助我，我将不胜感激。这基本上就是我的编码

firebase.service.ts

import { Injectable } from '@angular/core';

import { AngularFirestore, AngularFirestoreDocument,AngularFirestoreCollection, DocumentReference } from '@angular/fire/firestore';

import { AngularFireAuth } from '@angular/fire/auth';

import { Subscription, Observable } from 'rxjs';

import {map, take} from 'rxjs/operators';

import {studl} from '../modal/studl';

@Injectable({

  providedIn: 'root'

})

export class FirebaseService {

  private students: Observable<studl[]>;

  private studCollection: AngularFirestoreCollection<studl>;

  constructor(

     public afs: AngularFirestore,

    public afAuth: AngularFireAuth) {


      this.studCollection = this.afs.collection<studl>('StudentList');

      this.students = this.studCollection.snapshotChanges().pipe(

          map(actions => {

            return actions.map(a => {

              const data = a.payload.doc.data();

              const id = a.payload.doc.id;

              return { id, ...data };

            });

          })

      );

    }

    //getall

    getAllStud(): Observable<studl[]> {

      return this.students;

    }

    //getsingle

    getStudSingle(id: string): Observable<studl> {

      return this.studCollection.doc<studl>(id).valueChanges().pipe(

          take(1),

          map(note => {

            note.id = id;

            return note;

          })

      );

    }

    }
}

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

import { AuthenticateService } from '../services/authentication.service';

import { LoadingController } from '@ionic/angular';

import { Router, ActivatedRoute, Params } from '@angular/router';

import { NavController, ModalController } from '@ionic/angular';

import { FirebaseService } from '../services/firebase.service'

import { AngularFirestore } from '@angular/fire/firestore';

import { FormControl } from '@angular/forms';

//import { debounceTime } from 'rxjs/operators';

import { studl } from '../modal/studl';

import { Observable } from 'rxjs';

@Component({

  selector: 'app-studlist',

  templateUrl: './studlist.page.html',

  styleUrls: ['./studlist.page.scss'],

})

export class StudlistPage implements OnInit {

  public students: Observable<studl[]>;

  constructor(

    public loadingCtrl: LoadingController,

    private authService: AuthenticateService,

    private fService: FirebaseService,

    private firestore: AngularFirestore,

    private router: Router,

    private route: ActivatedRoute,

    private navCtrl: NavController

  ) { }

  ngOnInit() {

    this.students = this.fService.getAllStud();

  }

}

---

有一个类似的问题，您需要的内容可以在上面的链接中找到答案。如果答案不能很好地为您服务，请重新评论答案以帮助您解决问题。

您可以使用angulars数组运算符进行搜索。只要您拥有的对象是数组

比如说

this.students = this.students.filter((student) => student.booth.toLowerCase() === 'search Terms');

或者，如果您希望使用和观察，您可以使用管道和地图

  ngOnInit() {

    this.students = this.fService.getAllStud();
    this.students.pipe
    (
     map(
         students => {
          return students.filter((student) => 
          student.booth.toLowerCase() === 'search Terms');
         }
        )
    )

  }

---

你看过我的服务吗？这与他的服务不同。如何在->this.avisos=this.afs.collection（'avisos'，ref=>ref.where（'categoria'，'='，'categoriaToFilter'）.valueChanges（）中应用我的集合，因为我已经将我的集合声明为this.studCollection=this.afs.collection（'StudentList'）；在构造函数内。this.studCollection=this.afs.collection（'StudentList'）；应该应用过滤器的返回值可以从内部排序规则中获得，如下所示：this.studCollection=this.afs.collection（'StudentList'，ref=>并将条件放在这里）；因此，您需要在search命令中重新声明您的状态。

this.students = this.students.filter((student) => student.booth.toLowerCase() === 'search Terms');

  ngOnInit() {

    this.students = this.fService.getAllStud();
    this.students.pipe
    (
     map(
         students => {
          return students.filter((student) => 
          student.booth.toLowerCase() === 'search Terms');
         }
        )
    )

  }