1

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!

Andrei
  • 33
  • 3
  • When you are opening the modal in component.ts with this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}), can you pass the Reviews array explicitly? I don't think that array is accessible in modal at the moment. – usalin Jun 07 '21 at 20:02
  • Are you sure that "Reviews" has value (I can not see in your code when you call to `getDoctorReviews`)? has you any error in console? BTW: I suggest you create a service in stead of subscribe directly in the component to this.db.collection – Eliseo Jun 08 '21 at 09:43

0 Answers0