ng2-charts 不适用于 angularjs2 webpack

Question

我正在尝试将 ng2-charts 与 angularjs 2:

一起使用

在 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 别名：{ 'ng2-charts': 'node_modules/ng2-charts' }

浏览器或执行 npm 测试时的错误是：

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] 时，它会查找属性在 canvas 而不是 baseChart.

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

AppModule

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 数组包含 ChartsModule，您将能够使用图表指令和组件，而无需将它们导入您的组件。

ng2-charts 不适用于 angularjs2 webpack

ng2-charts not working with angularjs2 webpack

webpack

ng2-charts

angular