Angular 没有第二次设置动态 HTML embed src 属性答案

【问题标题】：Angular doesnt set dynamic HTML embed src attribute at second timeAngular 没有第二次设置动态 HTML embed src 属性
【发布时间】：2019-12-29 08:54:15
【问题描述】：

我正在尝试使用 this.renderer.setAttribute(this.pdf.nativeElement, "src", ... 将 PDF 文件路径动态设置为 embed 标签

一开始我可以设置embedsrc PDF 路径，它会显示在屏幕上，但第二次我设置了另一个路径，但它没有按预期工作。

谁能帮忙？

现场演示链接是： https://stackblitz.com/edit/angular-kghaku

【问题讨论】：

attribute 更改未被 javascript 检测到。你应该使用属性而不是属性。

标签： html angular pdf

【解决方案1】：

尝试绑定：

  <embed #pdf src="{{ selectedSRC }}">

在组件中：

  selectedSRC: string;

  setpdf1(){
    this.selectedSRC = "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf";
  }

  setpdf2(){
    this.selectedSRC = "https://file-examples.com/wp-content/uploads/2017/10/file-sample_150kB.pdf";
  }

【讨论】：

您可以对其进行消毒。
我以前做过但没用，唯一的解决方案是从嵌入中删除 src 并再次将其分配为同步

【解决方案2】：

您需要先删除 src 属性，然后再应用新的。另外，需要将setAttribute 包裹在setTimeout 中，因为它需要在removeAttribute 之后执行

StackBlitz Demo

 setpdf1() {
    this.renderer.removeAttribute(this.pdf.nativeElement, "src");
    setTimeout(() => {
      this.renderer.setAttribute(this.pdf.nativeElement, "src", "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf")
    })
  }

  setpdf2() {
    this.renderer.removeAttribute(this.pdf.nativeElement, "src");
    setTimeout(() => {
      this.renderer.setAttribute(this.pdf.nativeElement, "src", "https://file-examples.com/wp-content/uploads/2017/10/file-sample_150kB.pdf")
    })
  }

【讨论】：