Question

我在Angular 2模板中尝试了这段代码：

<ul class="products">
  <li *ngFor="#p of products">
    <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"
         xmlns:svg="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
         <g>
            <title>{{p.Name}}</title>
            <image xlink:href="http://somewhere.com/{{p.Picture1}}"
                   id="svg_21" height="176.731579" width="117" y="28" x="32" />
        </g>
    </svg></li></ul>

得到了错误：

 EXCEPTION: Template parse errors:
 Can't bind to '@xlink:href' since it isn't a known native property 
 <image [ERROR ->]xlink:href="http://somewhere.com/{{p.Picture1}}"
        id="svg_21" height="176.731579" widt"): AppComponent@13:37

我尝试使用它，这肯定是在正确的道路上：

attr.xlink:href="http://somewhere.com/{{p.Picture1}}"

但是在使用它时，我得到的错误是找不到my-app。

Answer 1

发表问题后，我找到了答案：

<image *ngIf="p.Picture1" attr.xlink:href="http://somewhere.com/{{p.Picture1}}" />

显然，如果p.Picture1为空，则会更有可能使html或SVG无效，从而导致找不到my-app。

Angular 2如何加载SVG图像？

1 个答案: