双重绑定角度2与SVG

Question

我正在编写一个Angular 2应用程序，我无法理解为什么Angular无法正常使用＆lt; svg＆gt;。当我尝试使用角度激活SVG元素时，我在控制台中看到错误。

   <rect x={{rect.x}} y={{rect.y}} width={{rect.width}} height={{rect.height}} fill={{rect.fill}} stroke={{rect.stroke}} />
<path [d]="M0,0 v rect.height h rect.width v- rect.height z" />

Answer 1

这应该有效

<rect [attr.x]="rect.x" [attr.y]="rect.y" [attr.width]="rect.width" [attr.height]="rect.height"
 [attr.fill]="rect.fill" [attr.stroke]="rect.stroke" />

x={{rect.x}}（相当于[x]="rect.x"是属性绑定语法，但这些SVG属性需要属性绑定。