Angular2 * ngFor with SVG circle

Question

我正在尝试为饼图创建一个图例/关键字，其中一个小圆圈的图形和文本旁边的颜色相同。但是，当我尝试这样做时，这是我得到的错误：

“模板解析错误： 无法绑定到'fill'，因为它不是已知的本机属性“

以下是我的代码：

<svg *ngFor="let item of items;" width="250" height="75">
    <circle cx="50" cy="50" r="20" fill={{item.color}} />
    <text x="100" y="50">{{item.name}}</text>
</svg>

item.color和item.name都是字符串，当我尝试将它们都显示为文本时，所有值都会出现。

有谁知道如何修复此错误？

Answer 1

尝试以下方法，

<svg *ngFor="let item of items;" width="250" height="75">
    <circle cx="50" cy="50" r="20" [attr.fill]="item.color" />
    <text x="100" y="50">{{item.name}}</text>
</svg>