NG2-Charts模板解析错误：无法绑定到“数据集”，因为它不是“ canvas”的已知属性

Question

我正在尝试使用在https://valor-software.com/ng2-charts/中找到的ng2-charts的示例

它无法正常工作，并且出现此错误zone.js：642

Unhandled Promise rejection: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
<div style="display: block">
    <canvas baseChart
        [ERROR ->][datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
"): ng:///FAModule/Step0Component.html@255:8

我安装了

npm install ng2-charts --save
npm install chart.js --save

我的component.html

<div style="display: block">
    <canvas baseChart
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>
  </div>

我的component.ts

import Chart from 'chart.js';

@Component({
  templateUrl: './filename.component.html',
  styleUrls: ['./filename.component.css', '../file.css']

})
  // Doughnut
  public doughnutChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
  public doughnutChartData:number[] = [350, 450, 100];
  public doughnutChartType:string = 'doughnut';

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

我的app.module.ts

import { ChartsModule } from 'ng2-charts/ng2-charts';
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
      ChartsModule,

.......

我的index.html

 <script src="node_modules/chart.js/src/chart.js"></script>

完全错误

Unhandled Promise rejection: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
<div style="display: block">
    <canvas baseChart
        [ERROR ->][datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
"): ng:///FAModule/Step0Component.html@255:8
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
        [datasets]="barChartData"
        [ERROR ->][labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
"): ng:///FAModule/Step0Component.html@256:8
Can't bind to 'options' since it isn't a known property of 'canvas'. ("
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [ERROR ->][options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
"): ng:///FAModule/Step0Component.html@257:8
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [ERROR ->][legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($ev"): ng:///FAModule/Step0Component.html@258:8
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [ERROR ->][chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartC"): ng:///FAModule/Step0Component.html@259:8 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
<div style="display: block">
    <canvas baseChart
        [ERROR ->][datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
"): ng:///FAModule/Step0Component.html@255:8
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
        [datasets]="barChartData"
        [ERROR ->][labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
"): ng:///FAModule/Step0Component.html@256:8
Can't bind to 'options' since it isn't a known property of 'canvas'. ("
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [ERROR ->][options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
"): ng:///FAModule/Step0Component.html@257:8
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [ERROR ->][legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($ev"): ng:///FAModule/Step0Component.html@258:8
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [ERROR ->][chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartC"): ng:///FAModule/Step0Component.html@259:8
    at syntaxError (http://localhost:4200/vendor.bundle.js:91797:34)
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:102288:19)
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:116039:39)
    at http://localhost:4200/vendor.bundle.js:115963:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:115963:19)
    at createResult (http://localhost:4200/vendor.bundle.js:115848:19)
    at ZoneDelegate.webpackJsonp.626.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2401:26)
    at Zone.webpackJsonp.626.Zone.run (http://localhost:4200/polyfills.bundle.js:2151:43)
    at http://localhost:4200/polyfills.bundle.js:2827:57 Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
<div style="display: block">
    <canvas baseChart
        [ERROR ->][datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
"): ng:///FAModule/Step0Component.html@255:8
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
        [datasets]="barChartData"
        [ERROR ->][labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
"): ng:///FAModule/Step0Component.html@256:8
Can't bind to 'options' since it isn't a known property of 'canvas'. ("
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [ERROR ->][options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
"): ng:///FAModule/Step0Component.html@257:8
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [ERROR ->][legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($ev"): ng:///FAModule/Step0Component.html@258:8
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [ERROR ->][chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartC"): ng:///FAModule/Step0Component.html@259:8
    at syntaxError (http://localhost:4200/vendor.bundle.js:91797:34)
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:102288:19)
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:116039:39)
    at http://localhost:4200/vendor.bundle.js:115963:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:115963:19)
    at createResult (http://localhost:4200/vendor.bundle.js:115848:19)
    at ZoneDelegate.webpackJsonp.626.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2401:26)
    at Zone.webpackJsonp.626.Zone.run (http://localhost:4200/polyfills.bundle.js:2151:43)
    at http://localhost:4200/polyfills.bundle.js:2827:57
api.onUnhandledError @ zone.js:642
handleUnhandledRejection @ zone.js:666
_loop_1 @ zone.js:657
api.microtaskDrainDone @ zone.js:661
drainMicroTaskQueue @ zone.js:592
zone.js:644 Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
<div style="display: block">
    <canvas baseChart
        [ERROR ->][datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
"): ng:///FAModule/Step0Component.html@255:8
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
        [datasets]="barChartData"
        [ERROR ->][labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
"): ng:///FAModule/Step0Component.html@256:8
Can't bind to 'options' since it isn't a known property of 'canvas'. ("
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [ERROR ->][options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
"): ng:///FAModule/Step0Component.html@257:8
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [ERROR ->][legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($ev"): ng:///FAModule/Step0Component.html@258:8
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [ERROR ->][chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartC"): ng:///FAModule/Step0Component.html@259:8
Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
<div style="display: block">
    <canvas baseChart
        [ERROR ->][datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
"): ng:///FAModule/Step0Component.html@255:8
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
        [datasets]="barChartData"
        [ERROR ->][labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
"): ng:///FAModule/Step0Component.html@256:8
Can't bind to 'options' since it isn't a known property of 'canvas'. ("
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [ERROR ->][options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
"): ng:///FAModule/Step0Component.html@257:8
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [ERROR ->][legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($ev"): ng:///FAModule/Step0Component.html@258:8
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [ERROR ->][chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartC"): ng:///FAModule/Step0Component.html@259:8
    at syntaxError (http://localhost:4200/vendor.bundle.js:91797:34)
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:102288:19)
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:116039:39)
    at http://localhost:4200/vendor.bundle.js:115963:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:115963:19)
    at createResult (http://localhost:4200/vendor.bundle.js:115848:19)
    at ZoneDelegate.webpackJsonp.626.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2401:26)
    at Zone.webpackJsonp.626.Zone.run (http://localhost:4200/polyfills.bundle.js:2151:43)
    at http://localhost:4200/polyfills.bundle.js:2827:57
    at syntaxError (http://localhost:4200/vendor.bundle.js:91797:34)
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:102288:19)
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:116039:39)
    at http://localhost:4200/vendor.bundle.js:115963:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:115963:19)
    at createResult (http://localhost:4200/vendor.bundle.js:115848:19)
    at ZoneDelegate.webpackJsonp.626.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2401:26)
    at Zone.webpackJsonp.626.Zone.run (http://localhost:4200/polyfills.bundle.js:2151:43)
    at http://localhost:4200/polyfills.bundle.js:2827:57
    at resolvePromise (http://localhost:4200/polyfills.bundle.js:2779:31)
    at resolvePromise (http://localhost:4200/polyfills.bundle.js:2750:17)
    at http://localhost:4200/polyfills.bundle.js:2827:17
    at ZoneDelegate.webpackJsonp.626.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2434:31)
    at Zone.webpackJsonp.626.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2201:47)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:2594:35)
    at <anonymous>

Answer 1

加载画布时，请确保barChartData包含数据。 您也可以在ngOnInit():void{ //there }得到它