如何在Angular ngx-charts中使用ngx-translate管道？

API 探路者

2026-10-4

正确实现ngx-charts标签ngx-translate翻译的方法

报错原因

绑定属性错误：showXAxisLabel是控制X轴标签是否显示的布尔属性，你错误地将翻译后的文本绑定到了这个属性上，实际存储标签文本的属性是xAxisLabel
混用Angular绑定语法：使用方括号[]做属性绑定时，不能嵌套{{}}插值表达式，两种语法不能同时使用

正确写法

直接对标签文本属性使用translate管道即可，完整代码示例如下：

<ngx-charts-bar-vertical
              [view]="view"
              [scheme]="colorScheme"
              [results]="single"
              [gradient]="gradient"
              [xAxis]="showXAxis"
              [yAxis]="showYAxis"
              [legend]="showLegend"
              [showXAxisLabel]="showXAxisLabel"
              [showYAxisLabel]="showYAxisLabel"
              [xAxisLabel]="'xAxisLabel' | translate"
              [yAxisLabel]="'yAxisLabel' | translate"
              (select)="onSelect($event)">
</ngx-charts-bar-vertical>