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>