Angular 6中使用ngFor处理非结构化JSON数组报错的解决方法

嘿，我来帮你搞定这个问题！首先咱们先揪出报错的根源：你的JSON数组里第三个对象{"age": 21}没有name属性，当ngFor循环到这个对象时，直接访问item.name就会触发“Cannot read property 'name' of undefined”错误（本质是item.name为undefined，在严格模式下就会抛出这类报错）。下面给你几个实用的解决方案，以及Angular 6处理非结构化JSON的通用思路：

一、快速解决当前报错 #

1. 使用安全导航操作符（?.） #

这是Angular里处理可选属性最常用的方式，它会在访问属性前先检查对象是否存在、属性是否有效，从根源避免报错。把你的模板代码改成这样：

<ul>
  <li *ngFor="let item of data">{{item?.name}}</li>
</ul>

这样循环到没有name的对象时，只会显示空白，不会抛出错误。

2. 过滤掉无效条目 #

如果你不想显示没有name属性的条目，可以在模板里结合<ng-container>和*ngIf来过滤：

<ul>
  <ng-container *ngFor="let item of data">
    <li *ngIf="item?.name">{{item.name}}</li>
  </ng-container>
</ul>

或者在组件的TypeScript代码里提前过滤数据，让模板更简洁：

// 组件类中的代码
filteredData = this.data.filter(item => item && item.name !== undefined);

然后模板里循环过滤后的数组：

<ul>
  <li *ngFor="let item of filteredData">{{item.name}}</li>
</ul>

二、Angular 6处理非结构化JSON数据的通用方法 #

非结构化JSON指的是数据结构不统一（比如有的对象缺属性、类型不一致），处理这类数据主要靠以下几种手段：

• 安全导航操作符（?.）：除了属性访问，还能用于数组索引，比如{{data?.[0]?.name}}，避免数组为空或索引越界的报错。
• 数据预处理：在组件中对获取到的JSON数据进行清洗，比如给缺失的属性设置默认值、过滤无效数据：

  processedData = this.data.map(item => ({
    name: item.name || '未知名称',
    age: item.age ?? 0 // Angular 6支持ES2020的空值合并运算符，也可以用item.age || 0
  }));
  

• 结合async管道（如果数据是Observable）：如果你的data是从HTTP请求获取的Observable，用async管道可以自动处理订阅，同时处理初始的空值状态：

  <ul>
    <li *ngFor="let item of data$ | async">{{item?.name}}</li>
  </ul>
  

• 使用*ngIf做全局存在性检查：如果data本身可能为undefined（比如数据还在加载中），可以先判断data是否存在再渲染列表：

  <ul *ngIf="data">
    <li *ngFor="let item of data">{{item?.name}}</li>
  </ul>
  

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