Angular - Cannot read property 'employees' of undefined

Question

I'm trying to display some datas with *ngFor angular directive in multi-dimensional array. The first ngFor is going well but I got an error on the third ngFor:

Cannot read property 'employees' of undefined

It means that my second ngFor is producing and undefined employee variable. Why is this happening ?

What am I doing wrong ?

The "alphas" array is a private property of the class linked to this template, and contains 1 value with the letter 'B' as well as at least one workplace in the "workplaces" array, the workplace itself containing at least one employee in the "employees" array. Isn't this should work ?

Here's the code of my template:

   <ion-item-group *ngFor="let alpha of alphas">
          <ion-item-divider color="light" *ngFor="let workplace of alpha.workplaces">{{alpha.letter}}</ion-item-divider>
            <ion-item *ngFor="let employee of workplace.employees">
              <ion-avatar item-start>
                <img src="assets/imgs/BK.png"> <!-- changer pour {{workplace.imgUrl}} -->
                <ion-icon *ngIf="employee.connected" name="md-square" color="orange" style="font-size: 10px; position: absolute;left: 50px;bottom: 22.5px;">
                </ion-icon>
              </ion-avatar>
              <h2>
                Zerdiz, 35 
                <ion-icon name="md-star" color="orange"></ion-icon>
                <ion-icon name="md-star" color="orange"></ion-icon>
                <ion-icon name="md-star" color="orange"></ion-icon>
                <ion-icon name="md-star-half" color="orange"></ion-icon>
                <ion-icon name="md-star-outline" color="orange"></ion-icon>
              </h2>
              <h3>Burger King Nice</h3>
              <p>Service</p>
            </ion-item>
           </ion-item-group>

Thanks to anyone who will take the time to read/answer.

Answer 1

Try using safe navigation operator as follows,

 <ion-item-divider color="light" *ngFor="let workplace of alpha?.workplaces">{{alpha?.letter}}</ion-item-divider>
          <div *ngFor="let employee of workplace?.employees">