Angular 2 ngFor访问嵌套对象报错：Cannot read property 'test_cases' of undefined

我之前也碰到过一模一样的坑！这个报错的核心原因很简单：Angular模板渲染的时候，你要访问test_cases的那个父对象（也就是第一层ngFor的item）要么还没加载完成（异步数据的情况），要么本身就是undefined/null，直接去读它的属性自然会崩溃。

结合你描述的场景，给你几个针对性的解决办法：

1. 用安全导航操作符（?.）快速避坑 #

这是最省心的办法，在访问嵌套属性前加个?.，Angular会自动判断前面的对象是否存在，不存在就直接停止访问，不会报错：

<div *ngFor="let item of yourDataArray">
  <!-- 第一层正常渲染 -->
  <p>应用名称：{{ item.app_name }} | 时间：{{ item.time_stamp }}</p>
  
  <!-- 用?.确保item存在时才访问test_cases，同时用*ngIf避免空列表渲染 -->
  <ul *ngIf="item?.test_cases">
    <li *ngFor="let testCase of item?.test_cases">
      用例名称：{{ testCase.case_name }} | 状态：{{ testCase.status }}
    </li>
  </ul>
</div>

2. 初始化异步数据，避免初始空值 #

如果你的数据是从API接口异步获取的，组件初始化时yourDataArray大概率是undefined，这时候先给它设个空数组：

// 组件.ts文件里
yourDataArray: any[] = []; // 初始化为空数组，而不是默认的undefined

ngOnInit() {
  // 模拟异步请求数据
  this.yourApiService.getTestData().subscribe(res => {
    this.yourDataArray = res;
  });
}

这样模板初始渲染时，ngFor遍历的是空数组，不会出现item为undefined的情况，等数据加载完成后会自动更新渲染。

3. 提前处理数据，补全缺失字段 #

有时候后端返回的数据里，可能某个元素压根没有test_cases字段，或者它的值是null，这时候可以在组件里先把数据处理一遍：

ngOnInit() {
  this.yourApiService.getTestData().subscribe(res => {
    this.yourDataArray = res.map(item => ({
      ...item,
      // 如果test_cases不存在，就默认给个空数组
      test_cases: item.test_cases || []
    }));
  });
}

处理完之后，所有元素的test_cases都是数组类型，模板里直接遍历就不会报错了。

4. 用*ngIf先判断父对象是否存在 #

如果不想用安全导航符，也可以用*ngIf先确保item和test_cases都存在，再渲染子列表：

<div *ngFor="let item of yourDataArray">
  <p>应用名称：{{ item.app_name }} | 时间：{{ item.time_stamp }}</p>
  
  <!-- 用ng-container做判断，不会额外生成DOM元素 -->
  <ng-container *ngIf="item && item.test_cases">
    <ul>
      <li *ngFor="let testCase of item.test_cases">
        用例名称：{{ testCase.case_name }} | 状态：{{ testCase.status }}
      </li>
    </ul>
  </ng-container>
</div>

你可以先试试第一种方法，一般异步数据的情况用安全导航符就能快速解决。如果还是不行，就检查下你的数据结构里是不是有元素缺失test_cases字段，或者初始数据没初始化。

内容的提问来源于stack exchange，提问作者calluna