Angular (ngx图表)传递可选输入

Question

我从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“，我只想不将任何”方案“输入传递给ngx-charts-bar-垂直组件。

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

Answer 1

我要做的是复制输入的默认值，我会在github上检查源代码。我不知道是否有一种方法可以动态获取输入的默认值。

事实上，一些缺省值是特定的(scheme是一个对象，但缺省值是string)，这就是为什么空/null值不能作为缺省值。

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