我正在构建一个" 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>
我猜这是一个语法错误。欢迎任何帮助!
使用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