[FIXED] How to iterate an Array inside an iterating set of JSON outputs in Angular?

Issue

I have a database table which save data about hotels. A hotel can have multiple contact numbers and implemented using a composite table for contact numbers. I want to display all the information of existing hotels. My output displays everything else other than the contact numbers. Please tell me a way to iterate and show the contact numbers of each hotel.

Here's the data coming to front end

address1: "No 400,"
address2: "Beach Road,"
city: "Colombo"
contacts: Array(2)
0: {contactNo: "0712244587"}
1: {contactNo: "0775469823"}
length: 2
__proto__: Array(0)
email: "kingsbury@gmail.com"
hid: 1
hotelName: "Kingsbury"
state: "Western"
zipCode: "10000"

.html code

<div
            class="card"
            style="height: 750px;"
            *ngFor="let hotel of availableHotels"
          >
            <div class="card-img-top">
              <div class="card-body">
                <img
                  style="width: 15cm; height: auto;"
                  src="../../assets/images/car2.jpg"
                  class="card-img"
                  id="img"
                  alt="..."
                />
                <h2 style="margin-top: 20px;">Hotel : {{ hotel.hotelName }}</h2>
                <h4 >{{ hotel.city }}</h4>
                <p class="font-weight-bold">Address : {{hotel.address1}}</p>
                <p class="font-weight-bold">Contact : </p>
             <div *ngFor="let contact of {{hotel.contact}};let i=index">
                  <p>{{contact.contactNo}}</p>
                </div>
           
                <p class="font-weight-bold">Email : {{hotel.email}}</p>
                
              </div>
            </div>
          </div>

.ts code

export class TestcComponent implements OnInit {

  availableHotels: Array<any>;
  hotel: ReplaySubject<String> = new ReplaySubject();
  

  constructor(
    private contractService: ContractService
  ) { }

  ngOnInit(){
    this.contractService.findAllHotels().subscribe((data) => {
      console.log(data);
      this.availableHotels = data;
      data.forEach((item) => {
        this.hotel.next(item);
        
        });
 

});
}
}

How output is shown :

Hotel : Shangri-La
Colombo 10
Address : No 400,

Contact :

Email : shangrila@gmail.com

I'm new to angular and still trying to get familiar with things. Thank you in advance !

Solution

Change this

<div *ngFor="let contact of {{hotel.contact}};let i=index">
  <p>{{contact.contactNo}}</p>
</div>

to

<div *ngFor="let contact of hotel?.contact; let i=index;">
  <p>{{contact?.contactNo}}</p>
</div>

Answered By - Smokey Dawson

Answer Checked By - Terry (PHPFixing Volunteer)