Question

我已经创建了一个基本的Angular页面，该页面从URL中获取一个ID（GUID），并使用该ID馈入API调用。我过去曾做过类似的页面，没有任何问题。但是出于某种原因，当涉及到You Tube视频时，这个人似乎不想打球。

当我将You Tube URL输出到控制台时，它不会出现问题，但是当我对其进行清理并将URL发布到嵌入的iframe的src属性时，它不会显示。但是（如果这很奇怪），如果我将描述从API从{{session?.SessionDescription}}更改为{{session.SessionDescription}}，则会显示视频。

无论我使用哪种描述文本，都将加载描述文本。但是，如果我不包含问号，则会收到控制台错误，即使该描述在屏幕上也无法加载。

如果可能，我只希望两者都加载而不会出现控制台错误。

HTML：

<nav class="pure-drawer" data-position="left">
    <h1>What is 3D Printing?</h1>
    <p>{{session?.SessionDescription}} {{session?.SessionGains}}</p>
</nav>   

<div class="pure-pusher-container">
    <div class="pure-pusher">
        <!-- Copy & Pasted from YouTube -->
        <iframe width="560" height="349" [src]="vidUrl" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

打字稿：

getCurrentSession(){
    this.sub = this.route.params.subscribe(params => {
      this.id = params['id']; 
      this._wmapi
      .getService("Session/" + this.id)
      .then((result) => {
        this.session = result;
        this.vidUrl = this.sanitizer.bypassSecurityTrustResourceUrl(result.SessionVideo);
        this.getSessionResources(this.id);
      })
      .catch(error => console.log(error));
    });
  }

Answer 1

我想如果您不使用问号，它就会卡在

<p>{{session.SessionDescription}} {{session?.SessionGains}}</p>

因为没有在开始时定义会话，并且也没有进行到iframe。当您获得会话时，它将刷新组件，并且iframe将获得真实的资源URL。

但是，当您使用问号时，此行不会出现错误：

<p>{{session?.SessionDescription}} {{session?.SessionGains}}</p>

，由于尚未定义iframe和url，因此它会加载undefined的URL（因为尚未从API获得响应）。然后，它以某种方式无法检测到更改并刷新iframe。

如果我的猜测是正确的，则可以通过以下方式解决此问题：

<nav class="pure-drawer" data-position="left">
    <h1>What is 3D Printing?</h1>
    <p>{{session?.SessionDescription}} {{session?.SessionGains}}</p>
</nav>   

<div class="pure-pusher-container">
    <div class="pure-pusher" *ngIf="vidUrl"> <!-- NGIF here or in iframe -->
        <!-- Copy & Pasted from YouTube -->
        <iframe width="560" height="349" [src]="vidUrl" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

请让我知道是否可以更新我的答案。祝你好运！

角度错误：无法匹配任何路线。网址段：“空”

1 个答案: