我试图学习ng 2图表与Angular 与项目目前我的工作。
所以，基本上，我首先尝试了一个新的Angular 项目，安装了ng 2-charts npm i ng2-charts chart.js
我试图通过将数据传递给子组件来实现这一点。现在我想知道为什么我的图表（子组件）不显示任何内容。

代码是这样的。

图表组件//示例图表组件.ts

import { Component, Input, OnInit } from "@angular/core";

@Component({
  selector: "app-sample-chart",
  templateUrl: "./sample-chart.component.html",
  styleUrls: ["./sample-chart.component.css"],
})
export class SampleChartComponent implements OnInit {
  @Input() barChartData;
  @Input() barChartLabels;
  @Input() barChartOptions;
  @Input() barChartPlugins;
  @Input() barChartLegend;
  @Input() barChartType;

  constructor() {}

  ngOnInit() {
    console.log(this.barChartData, "data");
  }
}

图表组件//示例图表组件.html

<canvas
  baseChart
  [datasets]="barChartData"
  [labels]="barChartLabels"
  [options]="barChartOptions"
  [plugins]="barChartPlugins"
  [legend]="barChartLegend"
  [chartType]="barChartType"
>
</canvas>

应用程序组件// .ts文件

import { Component } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import { Label } from "ng2-charts";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "app";

  public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: "end",
        align: "end",
      },
    },
  };
  public barChartLabels: Label[] = [
    "2006",
    "2007",
    "2008",
    "2009",
    "2010",
    "2011",
    "2012",
  ];
  public barChartType: ChartType = "bar";
  public barChartLegend = true;

  public barChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: "Series A" },
    { data: [28, 48, 40, 19, 86, 27, 90], label: "Series B" },
  ];
}

应用程序组件// .html文件

<div style="text-align: center">
  <h1>Welcome to {{ title }}!</h1>

  <div style="display: block">
    <app-sample-chart
      [barChartData]="barChartData"
      [barChartLabels]="barChartLabels"
      [barChartOptions]="barChartOptions"
      [barChartPlugins]="barChartPlugins"
      [barChartLegend]="barChartLegend"
      [barChartType]="barChartType"
    >
    </app-sample-chart>
  </div>

  <!-- <router-outlet></router-outlet> -->
</div>

以下是相关的版本。

图表& ng 2-使用的图表版本

"@angular/core": "^6.0.3",
"chart.js": "^2.9.4",
"ng2-charts": "^2.4.2",

我做错什么了吗？有什么建议吗？