Angular2 *ngFor 与 SVG 圆答案

【问题标题】：Angular2 *ngFor with SVG circleAngular2 *ngFor 与 SVG 圆
【发布时间】：2018-01-16 05:29:07
【问题描述】：

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

"模板解析错误：无法绑定到“填充”，因为它不是已知的原生属性”

下面是我的代码：

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

有人知道我该如何解决这个错误吗？

【问题讨论】：

试试fill="{{ item.color }}"
或[fill]="item.color"
谢谢大家！我能够用 [attr.fill]="item.color" 显示它

标签： angular svg ngfor

【解决方案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>

【讨论】：