Angular模态框访问嵌套数组对象属性报undefined错误

你遇到的Cannot read properties of undefined (reading 'name')由3个问题共同导致：

• 字段拼写错误：接口返回的货币字段是复数currencies（数组类型），模态框模板里误写为单数currencie，该属性在pais对象上不存在，值为undefined，读取name自然报错。
• 类型使用错误：currencies是嵌套数组，不是单个对象，就算拼写正确，直接访问数组的name属性也拿不到值。
• 时序问题：模态框初始化阶段，@Input()接收的pais还未完成赋值，此时直接访问深层属性也会触发同类报错。

1. 修正模板写法，根据业务需求选择渲染方式 #

仅展示第一个货币名称 #

用Angular安全导航运算符?.做逐层判空，规避初始化阶段的空值报错，同时指定数组下标取第一个元素：

<li class="list-group-item">{{pais?.currencies?.[0]?.name}}</li>

展示全部货币 #

和主视图表格逻辑一致，用*ngFor遍历currencies数组即可，加个判断处理分隔符避免末尾多逗号：

<li class="list-group-item">
  <ng-container *ngFor="let curr of pais?.currencies; let isLast = last">
    {{curr.name}}<span *ngIf="!isLast">、</span>
  </ng-container>
</li>

2. 优化TS类型定义，从编译阶段规避拼写错误 #

把代码里的any类型去掉，TS会在你写代码时直接提示不存在的属性，不用等运行时才发现拼写问题：

// 模态框TS
@Input() pais?: Paises; // 初始未传值时为undefined，不要用any绕过类型检查

// 主视图TS
paises: Paises[] = [];
paisSeleccionado?: Paises;

openModal(pais: Paises){
  this.paisSeleccionado = pais;
  this.modalService.openModal();
}

3. 检查传值绑定 #

确认模态框组件的调用标签上，传值写法是带方括号的属性绑定：

<你的模态框组件 [pais]="paisSeleccionado"></你的模态框组件>

如果漏了方括号，会把paisSeleccionado当成普通字符串传入，也会导致后续属性访问报错。

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