NG2-チャートはangularjs2のWebPACKので作業していない私はangularjs 2とNG2-チャートを使用しようとしています

Question

：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> 

in 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あなたが[datasets]にバインドしようとするので、それがそのプロパティを探し、ディレクティブとしてbaseChartを認識していないことを示唆していますbaseChartの代わりにcanvasです。

私が正しいとしたら、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が含まれていたら、にインポートすることなく、チャートディレクティブとコンポーネントを使用することができるようになりますあなたのコンポーネント。