Как выполнить поиск / фильтр списка в ioni c 4 firestore - PullRequest
Новая
       10

Как выполнить поиск / фильтр списка в ioni c 4 firestore

0 голосов
/ 18 января 2020

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

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;

}

Ответы [ 2 ]

0 голосов
/ 22 января 2020

вы можете искать, используя операторы массива angulars. Пока у вас есть массив.

, например 

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

или если вы хотите использовать sh и наблюдать, вы можете использовать pipe и map. 

  ngOnInit() {

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

  }
0 голосов
/ 18 января 2020

Фильтрация данных из Firestore whit angularfire

Был похожий вопрос, и то, что вам нужно, доступно в ответе по ссылке выше. Если ответ вам не подошел, тогда прокомментируйте ответ, чтобы решить его для вас.

...