我在ts中使用过这段代码
export type pieChartOptionss = {
series?: ApexNonAxisChartSeries | '';
chart?: ApexChart | '';
legend?: ApexLegend | '';
dataLabels?: ApexDataLabels | '';
responsive?: ApexResponsive[] | '';
labels?: any | '';
};
export class DashboardComponent implements OnInit {
public pieChartOptionss!: Partial<pieChartOptionss>;
}
(response: any) => {
this.user_data = response.results;
console.log('user_data', this.user_data)
this.user_data_true = this.user_data.filter(x => x.is_active === true)
this.user_data_false = this.user_data.filter(x => x.is_active === false)
this.pieChartData = [this.user_data_true.length, this.user_data_false.length];
this.pieChartOptionss = {
series: [this.user_data_true.length, this.user_data_false.length],
chart: {
type: 'donut',
width: 270,
},
legend: {
show: false,
},
dataLabels: {
enabled: true,
},
labels: ['Active', 'Inactive'],
responsive: [
{
breakpoint: 480,
options: {},
},
],
};
}
在 html 中我使用了这段代码：
<div class="body" *ngIf="pieChartOptionss">
<apx-chart [series]="pieChartOptionss?.series" [chart]="pieChartOptionss?.chart"
[labels]="pieChartOptionss?.labels" [responsive]="pieChartOptionss?.responsive"
[dataLabels]="pieChartOptionss?.dataLabels" [legend]="pieChartOptionss?.legend" class="apex-pie-center">
</apx-chart>
<div class="table-responsive m-t-15">
<table class="table align-items-center">
<tbody>
<tr>
<td><i class="fa fa-circle col-cyan mr-2"></i> {{ "active" | translate }}</td>
<td class="col-blue">{{pieChartOptionss?.series[0]}}</td>
</tr>
<tr>
<td><i class="fa fa-circle col-green mr-2"></i>{{ "inactive" | translate }}</td>
<td class="col-green">{{pieChartOptionss?.series[1]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
问题是，当我服务项目时显示此错误：
src/app/panel/dashboard/dashboard.component.html 中出现错误：97:26 - 错误 TS2322：键入 '"" | ApexNonAxisChart系列 |未定义'不是 可分配给类型“ApexAxisChartSeries |” ApexNonAxisChartSeries'.
类型“未定义”不可分配给类型“ApexAxisChartSeries |” ApexNonAxisChartSeries'.97
src/app/panel/dashboard/dashboard.component.ts:93:16 93 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件DashboardComponent的模板出现错误。 src/app/panel/dashboard/dashboard.component.html:97:62 - 错误 TS2322： 输入 '"" | Apex图表| undefined' 不可分配给类型 '顶点图表'。类型“未定义”不可分配给类型“ApexChart”。
97
src/app/panel/dashboard/dashboard.component.ts:93:16 93 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件DashboardComponent的模板出现错误。 src/app/panel/dashboard/dashboard.component.html:98:53 - 错误 TS2322： 输入 '"" | Apex响应式[] | undefined' 不可分配给类型 'ApexResponsive[]'。类型“未定义”不可分配给类型 'ApexResponsive[]'.
98 [标签]="pieChartOptionss?.labels" [responsive]="pieChartOptionss?.responsive" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/panel/dashboard/dashboard.component.ts:93:16 93 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件DashboardComponent的模板出现错误。 src/app/panel/dashboard/dashboard.component.html:99:17 - 错误 TS2322： 输入 '"" | Apex 数据标签 | undefined' 不可分配给类型 'ApexDataLabels'。类型“未定义”不可分配给类型 “ApexDataLabels”。
99 [dataLabels]="pieChartOptionss?.dataLabels" [legend]="pieChartOptionss?.legend" class="apex-pie-center"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/panel/dashboard/dashboard.component.ts:93:16 93 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件DashboardComponent的模板出现错误。 src/app/panel/dashboard/dashboard.component.html:99:61 - 错误 TS2322： 输入 '"" |巅峰传奇 | undefined' 不可分配给类型 “巅峰传奇”。类型“未定义”不可分配给类型 “巅峰传奇”。
99 [dataLabels]="pieChartOptionss?.dataLabels" [legend]="pieChartOptionss?.legend" class="apex-pie-center"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/panel/dashboard/dashboard.component.ts:93:16 93 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件DashboardComponent的模板出现错误。 src/app/panel/dashboard/dashboard.component.html:106:46 - 错误 TS2532：对象可能“未定义”。
106 {{pieChartOptionss?.series[0]}} ~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/panel/dashboard/dashboard.component.ts:93:16 93 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件DashboardComponent的模板出现错误。 src/app/panel/dashboard/dashboard.component.html:110:47 - 错误 TS2532：对象可能“未定义”。
110 {{pieChartOptionss?.series[1]}}
对我有用的唯一解决方案是添加单词“any”，如下面的代码所示：
public pieChartOptionss!: Partial<pieChartOptionss> | any;
我的解决方案是加上“！”在 html 属性的末尾。像这样：
<div id="chart">
<apx-chart [series]="chartOptions.series!" [chart]="chartOptions.chart!" [plotOptions]="chartOptions.plotOptions!"
[labels]="chartOptions.labels!">
</apx-chart>
</div>
这里的问题是您定义为
Partialpublic pieChartOptionss!: Partial<pieChartOptionss>;
您可以直接删除
anyPartialpublic pieChartOptionss!: pieChartOptionss;
现在你的html不会再抱怨了。
你需要的是输入你自己的界面
export interface ApexOptions {
annotations?: ApexAnnotations;
chart?: ApexChart;
colors?: any[];
dataLabels?: ApexDataLabels;
fill?: ApexFill;
forecastDataPoints?: ApexForecastDataPoints;
grid?: ApexGrid;
labels?: string[];
legend?: ApexLegend;
markers?: ApexMarkers;
noData?: ApexNoData;
plotOptions?: ApexPlotOptions;
responsive?: ApexResponsive[];
series: ApexAxisChartSeries | ApexNonAxisChartSeries;
states?: ApexStates;
stroke?: ApexStroke;
subtitle?: ApexTitleSubtitle;
theme?: ApexTheme;
title?: ApexTitleSubtitle;
tooltip?: ApexTooltip;
xaxis?: ApexXAxis;
yaxis?: ApexYAxis | ApexYAxis[];
}
并从您将提供的任何财产中删除问号
根据错误，我假设 pieChartOptionss?.series、pieChartOptionss?.chart、pieChartOptionss?.labels 等的值在初始渲染中为空。
在 *ngIf 中添加这些检查应该可以避免这些错误
<div class="body" *ngIf="pieChartOptionss?.series && pieChartOptionss?.chart && ... ">
</div>
或者，您可以在 component.ts 文件中使用一个函数来进行此检查，而不是在 component.html 中进行此检查
在组件.ts中
public validateOptions(options: pieChartOptionss): bool {
return options?.series && options?.chart && ...
}
在组件.html中
<div class="body" *ngIf="validateOptions(pieChartOptionss)">
</div>
使用“pieChartOptions”接口而不是类型，然后用空对象初始化“pieChartOptionss”变量（类型为pieChartOptions）
export interface pieChartOptions {
series: ApexNonAxisChartSeries;
chart: ApexChart;
legend: ApexLegend;
dataLabels: ApexDataLabels;
responsive: ApexResponsive[];
labels?: any;
};
public pieChartOptionss: pieChartOptions = {} pieChartOptions;
public pieChartOptionss!: 部分；
在上面的代码中，您可以像这样修改它在 ng-apexcharts 1.10.0 版本中对我有用
公共pieChartOptionss！：pieChartOptionss;