如何在 ionic 4 firestore 中执行搜索/过滤列表

Question

我已经尝试了很多教程，但我找不到任何关于如何执行搜索功能的解决方案。我想通过一个名为展位的字段在 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;

          })

      );

    }

    }
}

Home.html

<ion-content>

  <div class="title-block">

    <div class="heading"></div>

  </div>

  <ion-searchba></ion-searchbar >

  <ion-list>

    <ion-list-header>

      <ion-label>Select your student</ion-label>

    </ion-list-header>

    <ion-item *ngFor="let note of (students | async)">

      <ion-thumbnail slot="start">

        <img src="assets/icon/check.png">

      </ion-thumbnail>

      <ion-label>

        <h5>{{note.name}}</h5>

        <p>Matrix:{{note.matrix}}</p>

        <p>Booth:{{note.booth}}</p>

      </ion-label>



      <ion-button fill="outline" slot="end" [routerLink]="'/role/'+note.id">Evaluate</ion-button>

    </ion-item>

  </ion-list>
</ion-content>

Home.ts

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();

  }

Studl.modal.ts

export interface studl {

    id?: any;

    name: string;

    booth: string;

    matrix: string;

    cspmark:string;

    exmark:string;

    svmark:string;

}

Answer 1

您可以使用 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');
         }
        )
    )

  }

Answer 2

Filter data from Firestore whit angularfire

有一个类似的问题，您需要的答案可以在上面的链接中找到。如果答案对您没有帮助，请重新评论答案为您解决。