Angular调用API获取数据后控制台报读取Projects属性未定义错误如何解决

报错原因 #

模板初始化渲染时机早于接口数据返回，初始状态下projects未赋值为undefined，此时访问projects.Projects就会抛出该错误。接口返回数据给projects赋值后渲染逻辑正常，所以功能不受影响。

解决方案 #

以下三种方案任选一种即可，优先推荐方案1，改动最小：

• 方案1：模板使用可选链操作符
  直接修改HTML模板中的遍历表达式，用可选链?.替代原来的属性访问：

<mat-tab *ngFor="let object of projects?.Projects; let i = index" label="{{ object.Id }}"></mat-tab>

可选链会在左侧值为undefined/null时直接终止表达式求值，不会抛出错误，等projects赋值完成后会自动正常遍历渲染。

• 方案2：给变量设置初始默认值
  修改组件中projects的声明代码，提前预设结构避免属性访问报错：

// 替换原有的 projects: any; 声明
projects: any = { Projects: [] };

初始状态下projects就包含空的Projects数组，遍历逻辑不会报错，接口返回数据后会自动覆盖初始值，不影响业务逻辑。

• 方案3：用*ngIf控制渲染时机
  在外层容器加上条件判断，等数据加载完成后再渲染标签页部分，适合需要搭配加载提示的场景：

<mat-tab-group *ngIf="projects?.Projects">
  <mat-tab *ngFor="let object of projects.Projects; let i = index" label="{{ object.Id }}"></mat-tab>
</mat-tab-group>

也可以在判断不成立时单独渲染加载提示、空状态等UI组件。

内容的提问来源于stack exchange，提问作者Rihards Ādminis