带有 SVG 圆的 Angular2 *ngFor

Question

我正在尝试为饼图创建一个 legend/key，其中有一个小圆圈，该圆圈的颜色和旁边的文字颜色相同。但是，这是我尝试执行此操作时遇到的错误：

“模板解析错误：无法绑定到 '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>

带有 SVG 圆的 Angular2 *ngFor

Angular2 *ngFor with SVG circle

svg

ngfor

angular