ng2-charts не работает с веб-пакетом angularjs2

Я пытаюсь использовать ng2-диаграммы с 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)

webpack angular ng2-charts
person EL missaoui habib    schedule 18.10.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Сообщение об ошибке предполагает, что Angular не распознает 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, вы сможете использовать директивы и компоненты диаграммы без необходимости импортировать их в свои компоненты.

person BeetleJuice    schedule 19.10.2016
comment
Подождите, но вопрос был о проверке кармы. возникла эта проблема после запуска ng test. Итак, где у меня есть импорт ChartsModule в karna? - person Janatbek Orozaly; 09.08.2017