时间戳

首页 > 解决方案 > 按文档字段过滤 Firestore 集合

angular - 按文档字段过滤 Firestore 集合

问题描述

我有三个集合：用户、医生和评论。

在我的 component.ts 中，我有两个数组：

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

我回来了*ngFor all the elements of the Doctors。

医生元素

评论集

医生集合

在按钮显示评论中，我调用了一个函数 getDoctorReviews(doctorID)，在这个函数中，我返回评论集合的数据，以这种方式过滤数据：

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

我收到未定义的

我试过这样：

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>

应该有一种方法可以根据医生 ID 字段值仅显示评论中的文档。

我很感激任何帮助。谢谢

标签： angulargoogle-cloud-firestore

解决方案

您@Input() doctorID: string;的组件中有，这表明包含组件将传递该doctorID字段的值。但是，您的点击处理程序正在调用getDoctorReviews(doctorID). 该方法指的是this.doctorID但您似乎没有在任何地方设置该字段。

删除组件doctorID字段，然后将doctorID（不带this.）传递给where.

推荐阅读