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

Question

我想将管道添加到我的 ngx-chart 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 }}

错误：

Error in /turbo_modules/@angular/compiler@8.2.14/bundles/compiler.umd.js (2603:21)

Stackblitz

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

Answer 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

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

How to use angular ngx-translate pipe in ngx-charts?

angular-i18n

angular-pipe

ngx-translate

angular