angular - 在 angular 的 ng-apexchart 上键入未定义错误

Question

请帮助我理解这个错误。

我只是想使用 ng-apexchart 为我的 Angular 网络应用程序创建一个条形图。我正在关注这个 article .我不确定我做错了什么，但我在组件的 html 文件中遇到错误。

这是在我的 html 中:

<apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart" [title]="chartOptions.title"></apx-chart>

错误在[系列][图表]和[标题]上，它说

Type 'ApexAxisChartSeries | undefined' is not assignable to type 'ApexAxisChartSeries | ApexNonAxisChartSeries'.
  Type 'undefined' is not assignable to type 'ApexAxisChartSeries | ApexNonAxisChartSeries'.ngtsc(2322)

此外，我是否可以只将前面提到的文章中的代码添加到我的父组件中，还是我也可以在任何子组件中使用它？

这是我的 app.component.ts

import { Component } from '@angular/core';


import {
  ChartComponent,
  ApexAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexTitleSubtitle
} from "ng-apexcharts";


export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  title: ApexTitleSubtitle;
};



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {

    this.chartOptions = {
      series: [
        {
          name: "My-series",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }
      ],
      chart: {
        height: 350,
        type: "bar"
      },
      title: {
        text: "My First Angular Chart"
      },
      xaxis: {
        categories: ["Jan", "Feb",  "Mar",  "Apr",  "May",  "Jun",  "Jul",  "Aug", "Sep"]
      }
    };

  }


  }

Answer 1

在 typescript 中使用非空断言运算符。我认为 Apexchart 的文档已经过时。

将感叹号添加到如下属性。

[series]="chartOptions.series!"