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元素

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

在这种情况下，如果detailLaunch $ .links具有值将呈现iframe

Angular：无法读取json对象中的属性'video_link'

1 个答案: