Javascript 角度11，子组件为'；t从父级接收嵌套的API对象

我已经在这个问题上纠缠了几天，只是不太明白到底出了什么问题。下面是应用程序的流程：

调用API->接收响应->在父组件中显示结果-> 当用户单击结果时，将结果从父级传递给子级

最后一步是导致我头痛的原因，我一生似乎都无法将嵌套结果从我的父母（missionList）传递给我的子组件（misionDetails）

在子组件HTML文件中，它抛出一个错误，表示“ILinks[]”类型上不存在属性“mission_small_patch”

奇怪的是，如果我只是重新保存我的接口文件，应用程序将重新加载，然后在子组件中显示图像！这让我很困惑，我知道这个属性是存在的&我相信我访问它是正确的

我只是不知道我在这里忽略了什么。这可能是我使用自定义管道在父级中显示数据的方式吗？我还尝试更改父对象中的getMission（）方法以映射值 与此类似&仍然没有变化：

getMission（）：void{
this.service.subscribe（（resp:any）=>{
this.mission\u patch\u small=resp.map（r=>r.links）
})
}

外部API（）响应为我提供了一个嵌套对象，我专门针对链接：任务补丁

“航班号”：1，
“任务名称”：“猎鹰号”，
“启动失败详细信息”：{
“时间”：33，
“高度”：空，
“原因”：“梅林发动机故障”
},
“链接”：{
“任务修补程序”：https://images2.imgbox.com/40/e3/GypSkayF_o.png",
“任务补丁小”：https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png",
“reddit_活动”：空，
“reddit_启动”：空，
“reddit_恢复”：空，
“reddit_媒体”：空，
“presskit”：空，
“文章链接”：https://www.space.com/2196-spacex-inaugural-falcon-1-rocket-lost-launch.html",
“维基百科”：https://en.wikipedia.org/wiki/DemoSat",
“视频链接”：https://www.youtube.com/watch?v=0a_00nJ_Y88",
“youtube\u id”：“0a\u 00nJ\u Y88”，
“flickr_图像”：[]
},

这是我接收数据的界面，你可以看到 我有一个不必要的领域，任务补丁小，我已经添加了它 调试的目的是因为我一生都无法访问此属性！我也尝试过将任务类型改为小型 任务补丁\u小：字符串[]&运气不好。我这样做是为了在上面描述的getMission（）方法中映射链接url

导出接口权限{
任务名称：字符串；
发布年份：字符串；
详细信息：字符串；
任务补丁小：字符串；
链接：ILinks[]；
}
导出接口iLink{
任务补丁小：字符串[]；
}

下面是我如何使用HttpClient和RxJs可观察对象获取数据

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“../models/mission”导入{IMission}；
从“rxjs”导入{Observable}；
@注射的({
providedIn:'根'，
})
导出类SpacexapiService{
baseURL:string='1〕https://api.spacexdata.com/v3/launches';
构造函数（私有http:HttpClient）{}
getMission（）：可观察{
返回this.http.get（this.baseURL）；
}
}

这是我的missionList.component.ts文件

从'@angular/core'导入{Component，OnInit}；
从“../models/mission”导入{IMission}；
从“../network/spacexapi.service”导入{SpacexapiService}；
@组成部分({
选择器：“应用程序任务列表”，
templateUrl:“./missionlist.component.html”，
样式URL:['./missionlist.component.css']，
})
导出类MissionlistComponent实现OnInit{
任务列表！：IMission[]；
selectedMission！：IMission；
构造函数（专用服务：SpacexapiService）{}
getMission（）：void{
this.service.getMission（）.subscribe（（resp:any）=>{
this.missionList=resp；
控制台日志（resp）；
});
}
onSelect（任务：IMission）：无效{
this.selectedMission=任务；
}
ngOnInit（）：void{
这个.getMission（）；
}
}

在父组件任务列表中显示数据

这正在工作链接中的嵌套数据在这里显示得很好

钥匙管

导出类keypipe实现PipeTransform{
转换（值：any，args？：any[]）：any{
让keys:any=Object.keys（值），
数据：any=[]；
keys.forEach（（key:any）=>{
数据推送（值[键]）；
});
返回数据；
}

子组件missionDetails

导出类MissiondetailsComponent实现OnInit{
@输入（）任务！：输入；
构造函数（）{}
ngOnInit（）：void{}
}

最后，这里是我如何尝试显示子对象上的数据以及在哪里收到错误

{{任务.任务名称}{{任务.发射年份}
{{任务详情}

{{mission.links | json}



< /代码> 您需要更多地研究返回的对象，考虑下面的摘录…

“链接”：{
“任务修补程序”：https://images2.imgbox.com/40/e3/GypSkayF_o.png",
“任务补丁小”：https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png",
“reddit_活动”：空，
“reddit_启动”：空，
“reddit_恢复”：空，
“reddit_媒体”：空，
“presskit”：空，
“文章链接”：https://www.space.com/2196-spacex-inaugural-falcon-1-rocket-lost-launch.html",
“维基百科