1

我正在尝试将 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 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)
4

1 回答 1

1

错误消息表明 thatAngular不能识别baseChart为指令，因此当您尝试绑定到 时[datasets]，它会查找该属性canvas而不是baseChart.

如果我是对的，解决方法是正确导入ChartsModule任何需要它的模块。不要直接导入到你的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数组包含ChartsModule，您将能够使用图表指令和组件，而无需将它们导入到您的组件中。

于 2016-10-19T00:26:48.183 回答