Angular4 svg rect 动态传递值 [英] Angular4 svg rect pass value dynamically
本文介绍了Angular4 svg rect 动态传递值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在构建一个BarsChartComponent"并且我正在使用 svg rect 来显示条形图.我想做的是动态传递宽度值..下面的代码不显示任何结果:
I am building a "BarsChartComponent" and I am using svg rect to display bars. What I am trying to do is to pass width value dynamically.. Code bellow does not display any result:
要显示的组件对象:
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>
我猜是语法错误..欢迎任何帮助!
I guess it is a syntax error.. Any help is welcome!
推荐答案
使用 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>
这篇关于Angular4 svg rect 动态传递值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文