时间戳

首页 > 解决方案 > 使用 Firestore 将值从 HTML 传递到 Angular 组件

angular - 使用 Firestore 将值从 HTML 传递到 Angular 组件

问题描述

此代码正确显示来自 Firestore 集合医生的所有文档。

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

在 HTML 中，我以这种方式显示数据：

<div *ngFor="let doctor of Doctors">
      <div class="list-group">
        <h5 class="mb-2">{{ doctor.doctorID }}</h5>
        <p class="mb-2"> {{ doctor.category }}</p>
        <p class="mb-2"> {{ doctor.doctorName }} </p>
          <button class='btn btn-primary' (click)="getDoctorReviews(doctorID)">Show Reviews</button>
          <button class='btn btn-secondary' (click)="hideDoctorReviews()">Hide</button>
      </div>
    </div>

当我单击按钮Show Reviews时，我需要一种将医生 ID 的值传递给component.ts的方法。现在我在 component.ts 中收到未定义的医生 ID。

按钮 显示评论 我需要这个值来对评论集合进行过滤。

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


//doctor Class
export class Doctor {
    doctorID: string;
    category: string;
    doctorName: string;
    reviewsNumber: number;
    
  }
  
//review Class
export class Review {
    doctorID: string;
    doctorName: string;
    userID: string;
    userName: String;
    rating: string;
    message: string;
    
}
//component.ts

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  Doctors: Doctor[];
  Reviews: Review[]; 
  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", "==", 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">
    <h5 class="mb-2">{{ doctor.doctorID }}</h5>
    <p class="mb-2"> {{ doctor.category }}</p>
    <p class="mb-2"> {{ doctor.doctorName }} </p>
      <button class='btn btn-primary' (click)="getDoctorReviews(doctorID)">Show Reviews</button>
      <button class='btn btn-secondary' (click)="hideDoctorReviews()">Hide</button>
  </div>
</div>

我感谢任何建议。

标签： angularfirebasegoogle-cloud-firestore

解决方案

您必须修改doctorId为doctor.doctorId.

<button class='btn btn-primary' (click)="getDoctorReviews(doctor.doctorID)">Show Reviews</button>

你必须doctorId在你的ts文件中添加参数。

getDoctorReviews(doctorId: string) {
    :

推荐阅读