Angular (диаграммы ngx) проходят необязательный ввод - PullRequest
0 голосов
/ 24 января 2020

Я начинаю с Angula 8 и ngx-charts.

Я хочу отображать графики из файлов конфигурации. Для этого я позволю файлу конфигурации предоставить несколько графических опций (в основном, почти все опции из https://swimlane.gitbook.io/ngx-charts/examples/bar-charts/vertical-bar-chart)

, и у меня есть компонент basi c, который выглядит следующим образом:

<ngx-charts-bar-vertical
    [results]="results"
    [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel"
    [view]="displayOptions.view"
    [scheme]="displayOptions.scheme"
    [schemeType]="displayOptions.schemeType"
    [customColors]="displayOptions.customColors"
    [animations]="displayOptions.animations"
    [legend]="displayOptions.legend"
    [legendPosition]="displayOptions.legendPosition"
    [gradient]="displayOptions.gradient"
    [tooltipDisabled]="displayOptions.tooltipDisabled"
    [xAxis]="displayOptions.xAxis"
    [yAxis]="displayOptions.yAxis"
    [showXAxisLabel]="displayOptions.showXAxisLabel"
    [showYAxisLabel]="displayOptions.showYAxisLabel"
    [showGridLines]="displayOptions.showGridLines"
    [xAxisTicks]="displayOptions.xAxisTicks"
    [yAxisTicks]="displayOptions.yAxisTicks"
    [showDataLabel]="displayOptions.showDataLabel"
    [barPadding]="displayOptions.barPadding"
    (select)="onSelect($event)"
>
</ngx-charts-bar-vertical>

Моя проблема в том, что я хочу использовать значения по умолчанию из ngx-диаграмм, если пользователь не предоставляет параметры. Но ngx-charts не допускает нулевой ввод для некоторых входов. Например, если «displayOptions.scheme» имеет значение null, диаграммы ngx не могут отображать график.

ERROR Error: Cannot read property 'scaleType' of undefined

https://stackblitz.com/edit/vertical-bar-chart?embed=1&file=app / app.component.ts (только удалить объект colorScheme). Даже если я предоставлю пустой массив для colorScheme.domain, он не использует значение по умолчанию.

На самом деле, я просто не хочу передавать какие-либо входные данные "схемы" компоненту ngx-charts-bar-vertical, если отсутствует displayOptions.scheme.

Есть ли способ сделать это? Я не нашел способа обусловить использование ввода в Angular.

1 Ответ

0 голосов
/ 24 января 2020

Что я собираюсь сделать, это скопировать значение по умолчанию для входных данных, я проверю исходный код на github. Я не знаю, есть ли способ получить значение ввода по умолчанию динамически.

На самом деле некоторые значения по умолчанию указаны c (схема является объектом, но значением по умолчанию является строка), и поэтому пустое / нулевое значение не работает как значение по умолчанию.

    <ngx-charts-bar-vertical
    [results]="results"
    [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel"
    [scheme]="this.displayOptions.scheme ? this.displayOptions.scheme : 'cool'"
    [schemeType]="this.displayOptions.schemeType ? this.displayOptions.schemeType : 'ordinal'"
    [customColors]="displayOptions.customColors"
    [animations]="this.displayOptions.animations ? this.displayOptions.animations : true"
    [legend]="this.displayOptions.legend ? this.displayOptions.legend : false"
    [gradient]="displayOptions.gradient"
    [tooltipDisabled]="this.displayOptions.tooltipDisabled ? this.displayOptions.tooltipDisabled : false"
    [xAxis]="displayOptions.xAxis"
    [yAxis]="displayOptions.yAxis"
    [showXAxisLabel]="displayOptions.showXAxisLabel"
    [showYAxisLabel]="displayOptions.showYAxisLabel"
    [showGridLines]="this.displayOptions.showGridLines ? this.displayOptions.showGridLines : false"
    [xAxisTicks]="displayOptions.xAxisTicks"
    [yAxisTicks]="displayOptions.yAxisTicks"
    [showDataLabel]="this.displayOptions.showDataLabel ? this.displayOptions.showDataLabel : false"
    [barPadding]="this.displayOptions.barPadding ? this.displayOptions.barPadding : 8"
    (select)="onSelect($event)">
</ngx-charts-bar-vertical>
...