Angular2 * ngFor SVGサークルで

Question

私は円グラフとその隣に同じ色で小さな円で円グラフの凡例/キーを作成しようとしています。

「テンプレートが解析エラー：それは知られているネイティブのプロパティではありませんので、 は、 『塗りつぶし』にバインドできません」の下

しかし、これは私がこれを行うにしようとすると、私は取得していますエラーがあります

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