Angular 5中如何解决对象属性未定义导致的TypeError报错？

嘿，我来帮你捋清楚这个问题～你遇到的报错根本原因是：你直接尝试访问深层属性manufacturer_field.manufacturer_guidelines[0].notes，但在这之前的某一层（比如manufacturer_field本身，或者manufacturer_guidelines数组）可能已经是undefined或者空数组了，所以还没到notes这一步就触发了错误。

你的代码问题点 #

原来的判断逻辑：

let notes; 
if (typeof manufacturer_field.manufacturer_guidelines[0].notes == undefined){ 
  notes = ''; 
} else { 
  notes = manufacturer_field.manufacturer_guidelines[0].notes; 
}

这里如果manufacturer_field是undefined，或者manufacturer_guidelines是空数组（manufacturer_guidelines[0]为undefined），那么在执行typeof ...的时候就会直接抛出“Cannot read property 'notes' of undefined”错误，根本走不到判断逻辑里。

修复方案 #

给你两种简单有效的修复方式：

1. 使用可选链操作符（推荐）

TS和现代JS都支持?.操作符，它会逐层检查属性是否存在，只要某一层是null/undefined就会停止访问，返回undefined，再配合|| ''转为空字符串：

const notes = manufacturer_field?.manufacturer_guidelines?.[0]?.notes || '';

这样不管哪一层缺失，都不会报错，最终notes要么是正常的属性值，要么是空字符串。

2. 逐层手动判断

如果你需要兼容更老的环境，可以手动逐层检查每一层是否存在：

let notes = '';
// 先确保manufacturer_field存在，且manufacturer_guidelines是有内容的数组
if (manufacturer_field && manufacturer_field.manufacturer_guidelines && manufacturer_field.manufacturer_guidelines.length > 0) {
  // 再取notes，同时处理notes本身为undefined的情况
  notes = manufacturer_field.manufacturer_guidelines[0].notes || '';
}

额外提醒 #

还要注意manufacturer_field是不是异步加载的数据（比如从API获取），如果组件初始化时数据还没返回，manufacturer_field会是undefined，这时候也会触发错误。这种情况可以在使用前先判断：

// 比如在组件里先判断数据是否加载完成
if (!manufacturer_field) return;
// 再执行上面的notes赋值逻辑

你的HTML代码里用了field.notes?.length是没问题的，空字符串的length是0，*ngIf会自动隐藏这个p标签，符合你的需求。

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