带有 SVG 圆的 Angular2 *ngFor

Question

我正在尝试为饼图创建一个图例/键，该饼图带有一个小圆圈，该圆圈在图形和旁边的文本中具有相同的颜色。但是，这是我尝试执行此操作时遇到的错误:

“模板解析错误: 无法绑定(bind)到 'fill'，因为它不是已知的 native 属性”

下面是我的代码:

<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>