Angular2中的SVG循环

Question

我有一个API，它以下列格式返回数据：

[{"title": "first", "icon": "firstIcon.svg"},
 {"title": "second", "icon": "iconForSecond.svg"}
 .
 .
] 

我想使用* ngFor将它们添加到Angular2页面。我可以使用SVG作为图像轻松使用：

<div *ngFor="">
  <img [src]='item.icon'/> item.title
</div>

但是，如果我尝试使用[1]中指定的SVG来做同样的事情，因为我希望能够在SVG等上应用CSS悬停样式。我似乎无法使其工作。我试过的两种方法都没有用。

<object data="item.icon" type="image/svg+xml"> // Does not work
<object [data]="item.icon" type="image/svg+xml"> // Does  not work

我应该怎么做？我在这里缺少什么？

[1] Do I use <img>, <object>, or <embed> for SVG files?

Answer 1

检查一下

<object data="{{ 'path/to/svg/' + item.icon }}" type="image/svg+xml">
    <img src="yourfallback.jpg" />
</object>