Angular 11：父传子嵌套API对象时子组件属性访问报错

核心错误汇总 #

• 接口定义完全不符合API返回结构：
  对应接口返回的links是单个对象，并非数组；mission_patch_small是单个字符串类型的URL，不是字符串数组。同时子组件模板存在属性名拼写错误：将mission_patch_small错写为mission_small_patch（字段顺序颠倒）。
• 父子组件输入绑定语法错误：
  父组件模板中子组件的传值写法完全不符合Angular规范，导致子组件无法接收selectedMission数据。
• 冗余自定义管道：
  missionList本身就是API返回的数组，无需额外用keys管道做对象键值提取，该管道属于无效逻辑。
• 类型报错根源：
  你将links定义为ILinks[]（数组类型），模板中访问links.xxx相当于在数组类型上取自定义属性，因此TypeScript抛出Property 'xxx' does not exist on type 'ILinks[]'的错误。

逐段代码修正 #

1. 调整TypeScript接口定义 #

删除冗余调试字段，对齐API实际返回结构：

export interface IMission {
  mission_name: string;
  launch_year: string;
  details: string;
  links: ILinks;
}

export interface ILinks {
  mission_patch_small: string;
  // 其他需要用到的links字段可按需补充
}

2. 修正父组件模板逻辑 #

• 调整子组件输入绑定为Angular标准语法
• 删除冗余的keys管道
  修正后父组件模板代码：

<ul class="missions" *ngIf="missionList">
    <li *ngFor="let mission of missionList" (click)="onSelect(mission)">
    <span>{{mission.mission_name}}</span> -- {{mission.launch_year}}
        <p>{{mission.details}}</p>
        <aside><img [src]="mission?.links?.mission_patch_small" /></aside>
    </li>
</ul>

<app-missiondetails [mission]="selectedMission"></app-missiondetails>

3. 修正子组件模板的属性名拼写 #

将错误的mission_small_patch替换为正确字段名：

<ul *ngIf="mission">
    <li><span>{{mission.mission_name}}</span> {{mission.launch_year}}
        <p>{{mission.details}}</p>
        <p>{{mission.links | json}}</p>
        <aside><img [src]="mission?.links?.mission_patch_small" /></aside>
    </li>
</ul>

4. 清理冗余逻辑 #

之前尝试的resp.map(r => r.links)映射代码可直接删除，现有getMission()方法中this.missionList = resp的赋值逻辑正确，无需额外处理。

关于“重新保存接口文件临时生效”的解释 #

这是Angular开发服务器的热重载缓存导致的临时现象：保存接口文件时，TypeScript类型检查临时失效，若运行时缓存命中了正确的字段值，图片就会临时渲染，重载完成后类型检查恢复，错误会重新出现。

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