html中的對象標簽的data屬性未更新新的url

Question

問題：我正在嘗試動態更新對象標簽的數據屬性。 問題是它第一次完美加載，但是此后即使我檢查數據屬性值是否使用Angular在html代碼中完美更新也沒有。 我相信它不會刷新。

HTML代碼：

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

角度代碼：

  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 
  }

我嘗試過的方法：在更新url之前隱藏/顯示，但不起作用。

請注意，我無法使用jQuery。 任何幫助將不勝感激。謝謝！

Answer 1

您應該避免在angular中使用純JavaScript代碼，否則angular不會意識到更改。 進行以下更改-

HTML代碼

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

角度代碼

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

演示

沃金的副本在這里https://stackblitz.com/edit/angular-object-url-pdf

Answer 2

像這樣更新數據屬性，而不是使用Javascript更新。

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