Angular2 试图显示 PDF

Question

I am trying to show a PDF file on my page. For do that I am using the object tag like this and it works:

<div style="width:100%;height:100%;position:relative;background-color:white">
  <object data="http://eloquentjavascript.net/Eloquent_JavaScript.pdf" 
    type="application/pdf" width="100%" height="100%">
    <param name="view" value="Fit" />
  </object>
</div>

But I need to set the object data dynamically, like this:

<div style="width:100%;height:100%;position:relative;background-color:white">
  <object data="{{url}}" 
    type="application/pdf" width="100%" height="100%">
    <param name="view" value="Fit" />
  </object>
</div>

I've defined the url but it didn't show the PDF file. I've created an example of waht I wanna do: http://plnkr.co/edit/6xE1Q7YzcD8eB0K4lP8Y

Please any suggestion what I am doing wrong?

Thanks and regards, Edu

Answer 1

Seems to work fine in Chrome.

Some browsers (IE) resolve {{url}}" before Angular got a chance to replace the binding by the bound value which results in an error because {{url}}` isn't a valid URL.

You can prevent that by using

<object [data]="url" 

or

<object [attr.data]="url" 

or

<object attr.data="{{url}}"