按文档字段过滤 Firestore 集合

Question

I have three collections: users, doctors and reviews.

In my component.ts I have two arrays:

Doctors: Doctor[];
Reviews: Review[];

I returned in a *ngFor all the elements of the Doctors .

• doctor elements

• review collection

• doctor collection

In the button Show Reviews I call a function getDoctorReviews(doctorID) and in this function I return the data of the review collection filtering the data in this way:

collection("reviews", ref => ref.where("doctorID", "==", this.doctorID);

and I receive undefined

I tried in this way:

import { User } from './../model/user.model';
import { DoctorInfoService } from '../services/doctor-info.service';
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Data } from "@angular/router";
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Rx';

interface Doctor {
  doctorID: string;
  category: string;
  doctorName: string;
  reviewsNumber: number;
}

interface Review {
  doctorID: string;
  doctorName: string;
  userID: string;
  userName: String;
  rating: string;
  message: string;

}

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  Doctors: Doctor[];
  Reviews: Review[];
  Users: User[];

  doctorDocument: AngularFirestoreDocument<Doctor>;
  doctorCollection: AngularFirestoreCollection<Doctor>;

  @Input() doctorID: string;

  constructor(
    private db: AngularFirestore) {

  }

  ngOnInit(): void {

    this.db
      .collection("doctors")
      .snapshotChanges()
      .subscribe(res => {
        this.Doctors = res.map(e => {
          return {
            id: e.payload.doc.id,
            ...e.payload.doc.data() as Doctor
          }
        })
      });
  }

  showReviews: boolean = false;

  getDoctorReviews() {
    this.showReviews = true;
    this.db
      .collection("reviews", ref => ref.where("doctorID", "==", this.doctorID))
      .snapshotChanges()
      .subscribe(res => {
        this.Reviews = res.map(e => {
          return {
            id: e.payload.doc.id,
            ...e.payload.doc.data() as Review
          }
        })
      });
  }

  hideDoctorReviews() {
    this.showReviews = false;
  }
}

<div *ngFor="let doctor of Doctors">
  <div class="list-group">
    <a class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-2">{{ doctor.doctorID }}</h5>
      </div>
      <p class="mb-2">Category {{ doctor.category }}</p>
      <p class="mb-2">Rating </p>
      <button class='btn btn-primary' (click)="getDoctorReviews(doctorID)">Show Reviews</button>
      <button class='btn btn-secondary' (click)="hideDoctorReviews()">Hide</button>
    </a>
  </div>
</div>


<div *ngIf="showReviews" class="list-group">
  <div *ngFor="let review of Reviews" class="row">
    <a class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-2">{{ review.doctorName }}</h5>
      </div>
      <p class="mb-2">Rating : {{ review.rating }}</p>
      <p class="mb-2">{{ review.userName }}</p>
      <p class="mb-2">{{ review.message }}</p>
    </a>
  </div>
</div>

There should be a way to show only the documents from reviews depending on the doctor ID field value.

I appreciate any help. Thanks

Answer 1

You have @Input() doctorID: string; in your component, which suggests that the containing component will pass a value for the doctorID field. However, your click handler is calling getDoctorReviews(doctorID) . That method refers to this.doctorID but you don't appear to be setting that field anywhere.

Remove the component doctorID field, then pass doctorID (without this. ) to the where .