Angular - 无法读取未定义的属性“员工”答案

【问题标题】：Angular - Cannot read property 'employees' of undefinedAngular - 无法读取未定义的属性“员工”
【发布时间】：2018-07-24 17:22:15
【问题描述】：

我正在尝试使用 *ngFor 角度指令在多维数组中显示一些数据。第一个 ngFor 进展顺利，但我在第三个 ngFor 上遇到错误：

无法读取未定义的属性“员工”

这意味着我的第二个 ngFor 正在生成和未定义的 employee 变量。为什么会这样？

我做错了什么？

“alphas”数组是链接到此模板的类的私有属性，包含 1 个带有字母“B”的值以及“workplaces”数组中的至少一个工作场所，工作场所本身至少包含“员工”数组中的一名员工。这不应该工作吗？

这是我的模板代码：

   <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>

感谢任何愿意花时间阅读/回答的人。

【问题讨论】：

标签： arrays angular multidimensional-array ngfor angular-template

【解决方案1】：

尝试如下使用安全导航算子，

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

【讨论】：

很好，我没有错误了。但是只有 item-divider 显示有好字母，我可以访问 alpha.workplaces[0].name 所以我的数组肯定是非空的并且里面有正确的数据。但应该显示的离子项目不是。请问这是什么原因造成的？
PS 为了更清晰，我将最后一个 ngFor 移到了 ion-item 中
我使用 {{alphas | json}} 一切都设置好了。