使用 Firestore 将值从 HTML 传递到 Angular 组件答案

【问题标题】：Passing a value from HTML to component in angular with Firestore使用 Firestore 将值从 HTML 传递到 Angular 组件
【发布时间】：2021-06-07 09:33:38
【问题描述】：

此代码正确显示了 Firestore 集合 doctors.

中的所有文档

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>

当我点击按钮时，我需要一种方法将 doctorID 的值传递给 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>

我感谢任何建议。

【问题讨论】：

你需要发送doctor对象的doctorID。试试看：getDoctorReviews(doctor.doctorID).
感谢您的解决方案。我很感激！

标签： angular firebase google-cloud-firestore

【解决方案1】：

您必须将doctorId 修改为doctor.doctorId。

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

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

getDoctorReviews(doctorId: string) {
    :

【讨论】：

这个问题阻止了我一个多星期。现在经过这么多天，我可以继续我的项目。非常感谢！