Angular2 * ngFor与SVG圆 [英] Angular2 *ngFor with SVG circle

问题描述

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

I am trying to create a legend/key for a pie chart with a small circle with the same color in the graph and text next to it. However, this is the error that I am getting when I try to do this:

模板解析错误: 无法绑定到填充"，因为它不是已知的本机属性"

"Template parse errors: Can't bind to 'fill' since it isn't a known native property"

下面是我的代码:

<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都是字符串，当我尝试将它们都显示为文本时，所有的值都会出现.

item.color and item.name are both strings, and when I try to just display them both as text, all the values do appear.

有人知道我该如何解决此错误?

Does anyone know how I can fix this error?

推荐答案

尝试以下操作，

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

这篇关于Angular2 * ngFor与SVG圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！