Angular4 svg rectパスの値を動的に

Question

"BarsChartComponent"をビルドしていますが、svg rectを使ってバーを表示しています。

items:any=[{Country:"Canada", Value:"1000"}, 
       {Country:"USA", Value:"800"}, 
       {Country:"Costa Rica", Value:"400"}, 
       {Country:"Brazil", Value:"500"}]; 

コンポーネントテンプレート：

<svg class="chart" width="420" height="150" aria-labelledby="title" role="img"> 
    <ng-template *ngFor="let item of items"> 
     <rect [attr.width]="item.Value" height="19" y="20"></rect> 
    </ng-template> 
    </svg> 

ディスプレイに

コンポーネントオブジェクト：私は何をしようとしていることは、コード怒鳴るがどんな結果を表示しません。..動的幅の値を渡すことです

文法エラーだと思います。 何か助けてください！

Answer 1

代わりng-template

<svg class="chart" width="420" height="150" aria-labelledby="title" role="img"> 
    <ng-container *ngFor="let item of items"> 
    <rect [attr.width]="item.Value" height="19" y="20"></rect> 
    </ng-container> 
</svg> 

Demo

の使用 ng-container