(NG2-CHARTS) Невозможно привязать к типу диаграммы, так как он не является известным свойством

Question

Я получаю следующую ошибку от моего компонента диаграммы.Я импортировал ChartsModule в мой файл app.module.ts, я не уверен, что происходит?

    Can't bind to 'ChartType' since it isn't a known property of 'canvas'. ("
    [options]="barChartOptions"
    [legend]="barChartLegend"
    [ERROR ->][ChartType]="barChartType">

Вот мой файл chart.component.ts:

const SAMPLE_BARCHART_DATA: any[] = [
  { data: [65, 59, 80, 81, 57, 54, 30], label: 'Fall Sales'},
  { data: [25, 39, 20, 41, 56, 53, 30], label: 'Spring Sales'},
];

const SAMPLE_BARCHART_LABELS: string[] = ['w1', 'w2' , 'w3', 'w4', 'w5', 'w6', 'w7'];

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


export class BarChartComponent implements OnInit {

  constructor() { }

  public barChartData: any[] = SAMPLE_BARCHART_DATA;
  public barChartLabels: string[] = SAMPLE_BARCHART_LABELS;
  public barChartType = 'bar';
  public barChartLegend = false;
  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };

  ngOnInit() {
  }

}

Вот шаблон HTML для моего компонента:

  <canvas baseChart
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [legend]="barChartLegend"
    [ChartType]="barChartType">
  </canvas>
</div>

Вот файл app.module.ts с правильным импортом:

import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { appRoutes } from '../routes';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { SectionDashboardComponent } from './Sections/section-dashboard/section-dashboard.component';
import { SectionComputerManagementComponent } from './Sections/section-computer-management/section-computer-management.component';
import { SectionHelpdeskLinksComponent } from './Sections/section-helpdesk-links/section-helpdesk-links.component';
import { BarChartComponent } from './charts/bar-chart/bar-chart.component';
import { LineChartComponent } from './charts/line-chart/line-chart.component';
import { PieChartComponent } from './charts/pie-chart/pie-chart.component';
import { ChartsModule } from 'ng2-charts';


@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    SidebarComponent,
    SectionDashboardComponent,
    SectionComputerManagementComponent,
    SectionHelpdeskLinksComponent,
    BarChartComponent,
    LineChartComponent,
    PieChartComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes),
    ChartsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Кроме того, вот мои стили файла angular.json исценарии:

 "styles": [
              "../ngsight/node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "../ngsight/node_modules/jquery/dist/jquery.min.js",
              "../ngsight/node_modules/popper.js/dist/umd/popper.min.js",
              "../ngsight/node_modules/chart.js/dist/chart.min.js",
              "../ngsight/node_modules/bootstrap/dist/js/bootstrap.min.js",
              "../ngsight/node_modules/chart.js/dist/Chart.bundle.min.js"
            ],

Answer 1

chartType - это верблюжий кейс.

Используйте ниже:

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