角度：无法读取 json 对象中的属性"video_link"

Question

所以我使用http.get获取JSON格式的SpaceX api。https://api.spacexdata.com/v2/launches

我编写了一个Launch接口来接受所有表面级别的JSON值。我可以很容易地得到他们的价值通过使用：

{{ detailedLaunch$.mission_name }}

如果我想在对象中更深地存储一个值，我会创建一个语句，比如：

{{ detailedLaunch$.links.video_link }}

当我把它放在p或h2标签中时，它会显示正确的链接！https://www.youtube.com/watch?v=dLQ2tZEH6G0这正是我想要的！

然而，当我尝试将其作为iframe-src插入时，我会收到以下控制台错误：

ERROR TypeError: Cannot read property 'video_link' of undefined
ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

我创建了一个Links接口作为Launch接口的子对象。

import { Links } from './Links';
export interface Launch {
flight_number: number;    
mission_name?: string;     
launch_year?: string;      
launch_date_utc?: string;    
telemetry?: string;          
launch_site?: string;        
launch_success?: boolean;    
site_name_long?: string;     
links: Links;                            
details?: string;

和

export interface Links {
mission_patch: string;
mission_patch_small: string;
article_link: string;
wikipedia: string;
video_link: string;
}

这正是抛出错误的行：

<iframe width="420" height="315" src="{{ detailedLaunch$.links.video_link }}">
</iframe>

Answer 1

发出http请求是异步操作，因此在请求之前，您的对象是一个空对象

示例

let o = {} ;
o.address ; // undefinde 
o.address.street ; // Cannot read property 'street' of undefined

一个简单的解决方案是在请求json对象时隐藏iframe elemnt

<iframe *ngIf="detailedLaunch$.links" width="420" height="315" 
src="{{ detailedLaunch$.links.video_link }}">
</iframe>

在这种情况下，如果detailedLaunch$.links有一个值，将呈现iframe