Using this code it shows correctly the review objects:
<div *ngFor="let review of Reviews" >
<h5 class="mb-2">{{ review.doctorName }}</h5>
<p class="mb-2">Rating : {{ review.rating }}</p>
<p class="mb-2">{{ review.userName }}</p>
<p class="mb-2">{{ review.message }}</p>
</div>
But after adding the ngFor in a div class="modal-body"
it won't display anything
I open the modal from this button
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
And this is the modal template that contains the ngFor:
<ng-template #content let-modal>
<div class="modal-body">
<div *ngFor="let review of Reviews" >
<h5 class="mb-2">{{ review.doctorName }}</h5>
<p class="mb-2">Rating : {{ review.rating }}</p>
<p class="mb-2">{{ review.userName }}</p>
<p class="mb-2">{{ review.message }}</p>
</div>
</div>
</ng-template>
I tried in this way in component.ts
export class SearchComponent implements OnInit {
Doctors: Doctor[];
Reviews: Review[];
objectDoctor: AngularFirestoreDocument<Doctor>;
doctorCollection: AngularFirestoreCollection<Doctor>;
closeResult = '';
constructor(
private db: AngularFirestore,
private modalService: NgbModal) {
}
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
}
})
});
}
getDoctorReviews(doctorId: string) {
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
}
})
});
}
open(content) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
It seems that ngFor is not allowed in the modal window. I need a way to display the review objects in this window type.
I appreciate any suggestion(s). Thanks!