类型“未定义”不可分配给类型“ApexAxisChartSeries |” Apex非轴图表系列'

Question

我在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 <apx-chart [series]="pieChartOptionss?.series" [chart]="pieChartOptionss?.chart" ~~~~~~~~~~~~~~~~~~~~~~~~~ ～～～～～～～

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'。类型“未定义”不可分配给类型“ApexChart”。

97 <apx-chart [series]="pieChartOptionss?.series" [chart]="pieChartOptionss?.chart" ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~

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”[响应]=“pieChartOptionss？.响应”~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~

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' 不可分配给类型'ApexLegend'。类型“undefined”不可分配给类型“ApexLegend”。

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

Answer 1

对我有用的唯一解决方案是添加“any”一词，如下面的代码所示：

public pieChartOptionss!: Partial<pieChartOptionss> | any;

Answer 2

根据错误，我假设 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>