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

，我只想不将任何 "scheme" 输入传递给 ngx-charts-bar-vertical 组件

有办法吗？我没有找到任何方法来调节 Angular 中输入的使用。

Answer 1

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

事实上，一些默认值是特定的（方案是一个对象，但默认值是字符串），这就是为什么 empty/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>

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

Angular (ngx charts) pass optional input

angular

input

components

ngx-charts