Angular（ngx 图表）传递可选输入答案

【问题标题】：Angular (ngx charts) pass optional inputAngular（ngx 图表）传递可选输入
【发布时间】：2020-05-10 17:26:51
【问题描述】：

我从 Angula 8 和 ngx-charts 开始。

我想显示配置文件中的图表。为此，我允许配置文件提供几个图形选项（基本上，几乎所有选项都来自https://swimlane.gitbook.io/ngx-charts/examples/bar-charts/vertical-bar-chart）

我有一个看起来像这样的基本组件：

<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-charts 中的默认值。但是 ngx-charts 不允许某些输入为空输入。例如，如果 "displayOptions.scheme" 为 null，则 ngx-charts 无法显示图表。

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 提供了一个空数组，它也不使用默认值。

实际上，如果没有“displayOptions.scheme”，我只是不想将任何“scheme”输入传递给 ngx-charts-bar-vertical 组件。

有没有办法做到这一点？我没有找到任何方法来限制 Angular 中输入的使用。

【问题讨论】：

有更好的图表引擎echarts.apache.org/examples/en/index.html。如果你不能达到你想要的，试试 echarts。

标签： angular input components ngx-charts

【解决方案1】：

我要做的是复制输入的默认值，我会检查 github 上的源代码。不知道有没有办法动态获取输入的默认值。

事实上，一些默认值是特定的（方案是一个对象，但默认值是字符串），这就是为什么空/空值不能作为默认值。

    <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>

【讨论】：