Вложенный наблюдаемый запрос к Firestore с использованием Angular

Question

Я структурировал свою базу данных пожарного магазина как

1. Назначения
   • 3LDB7GogQNfwOtbxuVY2
     • назначение: 10 мая 2019 года в 17:30:00 UTC + 5:30
     • пациент: / пациенты / xCdynS1N33t0erFY3H0N
     • зарегистрировано: 30 апреля 2019 года в 18:57:00 UTC + 5: 30
2. пациенты
   • xCdynS1N33t0erFY3H0N
     • имя: "ИМЯ"
     • контакт: 1234567890
     • email: «email@domail.com»

Я пытаюсь перечислить все детали встреч с данными пациента.

Вот мой компонент приборной панели

export class DashboardComponent implements OnInit {

  private patientDocument: AngularFirestoreDocument<Patient>
  patient: Observable<Patient>
  private appointmentsCollection: AngularFirestoreCollection<Appointment>;
  appointments: Observable<Appointment[]>;

  constructor(private afs: AngularFirestore) {
  }

  ngOnInit() {
    this.appointmentsCollection = this.afs.collection('appointments')
    this.appointments = this.appointmentsCollection.valueChanges();

    this.appointments.subscribe(appointments => {
      appointments.forEach(appointment => {
        this.patientDocument = this.afs.doc(appointment.patient);
        this.patient = this.patientDocument.valueChanges()

        this.patient.subscribe(patient=>{
          console.log(patient.email)
        })
      })
    });

  }

}

вот фрагмент HTML

<div *ngFor="let appointment of appointments | async">
  <h3>{{ patient.email}}</h3>

  <h3>{{ appointment.appointmentAt.seconds * 1000 | date: 'medium'}}</h3>
</div>

Я действительно могу записать данные пациента. то есть, электронная почта здесь

но я не могу отобразить его в HTML.

Заранее спасибо