无法绑定到“chartType”，因为它不是“canvas”的已知属性

Question

我正在使用ng2-charts开发一个Angular 6应用程序。

然而，当我使用Visual Studio代码调试项目时，我收到以下错误，并且当我键入"ng serve“并按Enter时，我看到一个空白页面：

无法绑定到“chartType”，因为它不是“canvas”的已知属性

我尝试将"import {ChartsModule} from 'ng2-charts/ng2-charts';“添加到component.ts中。但是，我仍然收到相同的错误。

下面是my-bar-chart.component.html文件中的图表的HTML代码：

<div style="display: block">
  <canvas mdbChart
      [chartType]="chartType"
      [datasets]="chartDatasets"
      [labels]="chartLabels"
      [colors]="chartColors"
      [options]="chartOptions"
      [legend]="true"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)">
  </canvas>
</div>

下面是my-bar-chart.commponent.ts文件：

import { Component, OnInit } from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {ChartsModule} from 'ng2-charts/ng2-charts';

@Component({
  selector: 'app-my-bar-chart',
  templateUrl: './my-bar-chart.component.html',
  styleUrls: ['./my-bar-chart.component.css']
})

export class MyBarChartComponent implements OnInit {
  public chartType: string = 'horizontalBar';

  public chartDatasets: Array<any> = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' }
  ];

  public chartLabels: Array<any> = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

  public chartColors: Array<any> = [
    {
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 2,
    }
  ];

  public chartOptions: any = {
    responsive: true
  };
  public chartClicked(e: any): void { }
  public chartHovered(e: any): void { }

  constructor() { }
  ngOnInit() {
  }

}

下面是app.module.ts文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { MyBarChartComponent } from './my-bar-chart/my-bar-chart.component';
import { MyDoughnutChartComponent } from './my-doughnut-chart/my-doughnut-chart.component';
import { MyRadarChartComponent } from './my-radar-chart/my-radar-chart.component';
import { MyPieChartComponent } from './my-pie-chart/my-pie-chart.component';
import { Routes, RouterModule } from '@angular/router';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';


const routes: Routes=[
  {path:'bar-chart',component:MyBarChartComponent},
  {path:'doughnut-chart',component: MyDoughnutChartComponent},
  {path:'radar-chart',component:MyRadarChartComponent},
  {path:'pie-chart',component:MyPieChartComponent},
  {path:'**',component:MyBarChartComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    MyBarChartComponent,
    MyDoughnutChartComponent,
    MyRadarChartComponent,
    MyPieChartComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    NgbModule.forRoot(),
    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

当我输入"ng serve“并按回车键时，我希望看到图表。

Answer 1

您没有使用正确的指令。

请考虑以下指令:根据doc执行baseChart