html中的对象标签的data属性未更新新的url

Question

Issue: I am trying to update the data attribute of object tag dynamically. The issue is the first time it loads perfectly, but thereafter it does not even though when i inspect the data attribute values are updated perfectly in html code using Angular. I believe it's not getting refreshed.

Html Code:

<object id="content" *ngIf="download" [data]="newUrl" width="70%" height="300px"></object>

Angular Code:

  updateUrl(url: string) {
    console.log('Parent Component updateUrl: ' + url);
    this.download = false; // hide

    this.newUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    document.getElementById("content").setAttribute('data', url);    
    this.download = true; // show 
  }

What i Tried: Hide/Show before updating the url, but does not work.

Please note i cannot use jQuery. Any help would be greatly appreciated.Thanks!

Answer 1

You should avoid pure javascript code inside the angular otherwise angular will not be the aware of changes. Make the below changes -

html code

<object id="content" *ngIf="download" [attr.data]="newUrl" width="70%" height="300px"></object>

Angular Code

 updateUrl(url: string) {
    console.log('Parent Component updateUrl: ' + url);
    this.download = false; // hide
    this.newUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url); 
    this.download = true; // show 
  }

Demo

Woking copy is here https://stackblitz.com/edit/angular-object-url-pdf

Answer 2

像这样更新数据属性，而不是使用Javascript更新。

<object id="content" *ngIf="download" [attr.data]="newUrl" width="70%" height="300px"></object>