Angular使用嵌套属性接口时出现“无法读取未定义属性”错误求助

你遇到的这个报错太常见啦！问题出在你的food对象里的nutrients属性——因为接口里它是可选的（带?标记），所以当你初始化food的时候，nutrients默认是undefined。而Angular模板渲染时会直接去访问food.nutrients.calories，这时候nutrients还没被赋值，自然就抛出"Cannot read property 'calories' of undefined"的错误了。

下面给你几个靠谱的解决办法：

方法1：初始化时给nutrients赋默认空对象 #

这是最稳妥的方案，直接在组件类里初始化food的时候，把nutrients也初始化成一个空对象（或者带默认值的对象）：

import { Component } from '@angular/core';
import { Food } from './food.interface';

@Component({
  selector: 'app-food',
  templateUrl: './food.component.html',
})
export class FoodComponent {
  // 给nutrients赋初始空对象，避免模板访问时undefined
  food: Food = {
    name: '',
    nutrients: {} 
  };
}

这样模板渲染时，food.nutrients已经是一个存在的对象，访问calories就不会报错了，双向绑定也能正常工作。

方法2：使用可选链操作符（?.）做防御性访问 #

Angular支持ES6的可选链语法，你可以在模板里给嵌套属性加上?.，这样即使nutrients是undefined，也不会抛出错误，只会返回undefined：

<input type="number" placeholder="Calories" [(ngModel)]="food.nutrients?.calories" name="foodCalories" #calories="ngModel">

不过要注意：这种方式下，如果nutrients原本是undefined，你在输入框里输入值的时候，Angular不会自动帮你创建nutrients对象，所以最好还是结合方法1一起用，确保nutrients有初始值。

方法3：用*ngIf提前判断属性是否存在 #

如果你的业务场景中nutrients可能确实不存在，你可以在包含输入框的容器上添加*ngIf，确保只有nutrients存在时才渲染输入框：

<div *ngIf="food.nutrients">
  <input type="number" placeholder="Calories" [(ngModel)]="food.nutrients.calories" name="foodCalories" #calories="ngModel">
</div>

这种方式适合动态加载nutrients的场景，但如果nutrients是表单必填项，还是方法1更直接。

总的来说，方法1是最推荐的做法，从根源上避免了undefined的问题，后续的双向绑定和属性访问都能顺畅运行。

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