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

【问题标题】：How to use angular ngx-translate pipe in ngx-charts?如何在 ngx-charts 中使用角度 ngx-translate 管道？
【发布时间】：2025-12-10 17:15:02
【问题描述】：

我想将管道添加到我的 ngx 图表 xAxisLabel 和 yAxisLabel。

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

我在下面更改的代码导致错误。

[showXAxisLabel] = {{ 'xAxisLabel' | translate }}

错误：

/turbo_modules/@angular/compiler@8.2.14/bundles/compiler.umd.js (2603:21) 中的错误

Stackblitz

如何使用 ngx-charts 实现 ngx-translate 管道？

【问题讨论】：

你没有使用正确的绑定语法，你能试试[showXAxisLabel]="'xAxisLabel' | translate"吗？

标签： angular angular-pipe ngx-translate angular-i18n

【解决方案1】：

感谢@Amer 的评论，使用translate 管道的语法是错误的。必须是：

[xAxisLabel]="'xAxisLabel' | translate"

或

xAxisLabel="{{'xAxisLabel' | translate}}"

根据ngx-charts Vertical Bar Chart，

Property	Type	Description
showXAxisLabel	boolean	show or hide the x axis label
showYAxisLabel	boolean	show or hide the y axis label
xAxisLabel	string	the x axis label text
yAxisLabel	string	the y axis label text

您需要将带有翻译管道的文本分配给[xAxisLabel]和[yAxisLabel]，

但不是[showXAxisLabel] 和[showYAxisLabel]。

<ngx-charts-bar-vertical 
  [xAxisLabel]="'xAxisLabel' | translate" 
  [yAxisLabel]="'yAxisLabel' | translate">
</ngx-charts-bar-vertical>

Sample Solution on StackBliz

【讨论】：