Question

我正在尝试使用带有angularjs 2的ng2-charts：

在app.ts中

：

import { Component } from '@angular/core';
import { ApiService } from './shared';
import { ChartsModule } from 'ng2-charts/ng2-charts';

我的文件html：

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

webpack.config.js中的

别名：{ ＆＃39; ng2-charts＆＃39;：＆＃39; node_modules / ng2-charts＆＃39; }

浏览器中的错误或执行npm test时的错误：

Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("

 <canvas baseChart
            [ERROR ->][datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOption"): AppComponent@10:12
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
 <canvas baseChart
            [datasets]="barChartData"
            [ERROR ->][labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegen"): AppComponent@11:12
Can't bind to 'options' since it isn't a known property of 'canvas'. ("
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [ERROR ->][options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartTy"): AppComponent@12:12
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [ERROR ->][legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHover"): AppComponent@13:12
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)=""): AppComponent@14:12 in karma-shim.js (line 12563)

Answer 1

错误消息表明Angular并未将baseChart识别为指令，因此当您尝试绑定到[datasets]时，它会在{{1}上查找该属性而不是canvas。

如果我没错，修复方法是将baseChart正确导入任何需要它的模块。不直接将其导入您的ChartsModule

<强>的AppModule

AppComponent

一旦您的模块的import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; // or CommonModule import {ChartsModule} from 'ng2-charts/ng2-charts'; // https://angular.io/docs/ts/latest/guide/ngmodule.html#!#ngmodule-properties @NgModule({ imports: [ BrowserModule, ChartsModule], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }数组包含imports，您就可以使用图表指令和组件，而无需将它们导入到您的组件中。

ng2-charts无法使用angularjs2 webpack

1 个答案: