Блог

Главная - Вопросы по программированию - Как использовать угловую линию ngx-перевода в ngx-диаграммах?

Как использовать угловую линию ngx-перевода в ngx-диаграммах?

#angular #ngx-translate #angular-i18n

Вопрос:

Я хочу добавить конвейер в свою 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)

Стакблитц

Как я мог бы достичь конвейера ngx-translate с помощью ngx-диаграмм ?

Комментарии:

1. Вы не используете правильный синтаксис привязки, не могли бы вы попробовать [showXAxisLabel]="'xAxisLabel' | translate" ?

Ответ №1:

Судя по комментарию @Amer, синтаксис для использования translate канала был неправильным. Должны быть:

 [xAxisLabel]="'xAxisLabel' | translate"

или

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

И в соответствии с вертикальной гистограммой ngx-диаграмм,

Собственность Тип Описание
showXAxisLabel логический показать или скрыть метку оси x
Эффектная надпись логический показать или скрыть метку оси y
xAxisLabel строка текст метки по оси x
Яксислабель строка текст метки оси y

Вам нужно назначить текст с помощью канала перевода [xAxisLabel] и [yAxisLabel] ,

но не [showXAxisLabel] и. [showYAxisLabel] 

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

Образец решения на СтекбЛизе

Метки: