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-container 代替 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

Angular4 svg rect动态传递值

Angular4 svg rect pass value dynamically

angular

svg

rect