angular - ng2-charts-No se puede unir a ''datasets'' ya que no es una propiedad conocida de ''base-chart''

ng2-charts angular 6

Question

Versiones: Cordova: 6.3.1, Gulp CLI: 1.2.2, Ionic framework: 2.0.0-rc.0, Ionic CLI Version: 2.1.0

Estoy usando ng2-charts en mi aplicación ionic2.

Importar no import {ChartsModule} from "ng2-charts"; pero import {ChartsModule} from "ng2-charts/components/charts/charts;" debido a esto (problema # 440)

Toda mi app.module.ts

import { NgModule } from ''@angular/core'';
import { IonicApp, IonicModule } from ''ionic-angular'';
import { ChartsModule } from ''ng2-charts/components/charts/charts'';

import { MyApp } from ''./app.component'';
import { EventsPage } from ''../pages/events/events.component'';
import { ChartComponent } from ''../pages/chart/chart.component'';
import { APICaller } from ''../services/APICaller.service'';
import { EventDetailComponent } from ''../pages/event-detail/event-detail.component'';
import { ParticipantDetail } from ''../pages/participant-detail/participant-detail.component'';
import { ParticipantFeedComponent } from ''../pages/participant-feed/participant-feed.component'';



@NgModule({
  declarations: [
    MyApp,
    EventsPage,
    EventDetailComponent,
    ParticipantDetail,
    ParticipantFeedComponent,
    ChartComponent
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    ChartsModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    EventsPage,
    EventDetailComponent,
    ParticipantDetail,
    ParticipantFeedComponent,
    ChartComponent
  ],
  providers: [APICaller]
})
export class AppModule { }

ChartComponent :

import { Component, OnInit } from ''@angular/core'';
@Component({
    selector: ''pie-chart'',
    template: `

<base-chart
    class="chart"
    [datasets]="datasets"
    [labels]="labels"
    [options]="options"
    [chartType]="''doughnut''">Titel?
</base-chart>

`
})
export class ChartComponent implements OnInit {
    private datasets = [
        {
            label: "# of Votes",
            data: [12,19,3,5,2,3]
        }
    ];


    private labels = [''Red'', ''blue'', ''yellow'', ''green'', ''purple'', ''orange''];

    private options = {
        scales: {
            yAxes: [{
                beginAtZero: true
            }]
        }
    };

    constructor() {

    }

    ngOnInit() { }
}

Pensé que esto podría ser un problema con Chart.js . Y encontré que el chart.js instalado con npm estaba dando como resultado un 404 al hacer referencia a él en mi index.html como node_modules/chart.js/src/chart.js .

Así que descargué el Chart.bundle.min.js después de que esto no funcionara. Traté de descargar el Chart.js mismo. (colocándolo en src/assets/js/... ).

Este problema también se abordó en ng2-charts / ng2-charts.js no exporta la sección de comentarios de ChartsModule . Pero como no se proporcionó ninguna respuesta y esta no era la pregunta de raíz, publiqué esta.

Error: (la supresión del mensaje de error no ayudará, ya que está impidiendo que se cargue mi aplicación).

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can''t bind to ''datasets'' since it isn''t a known property of ''base-chart''.
1. If ''base-chart'' is an Angular component and it has ''datasets'' input, then verify that it is part of this module.
2. If ''base-chart'' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the ''@NgModule.schemas'' of this component to suppress this message.
 ("
    class="chart"

    [ERROR ->][datasets]="datasets"

    [labels]="labels"
"): ChartComponent@4:4
Can''t bind to ''labels'' since it isn''t a known property of ''base-chart''.
1. If ''base-chart'' is an Angular component and it has ''labels'' input, then verify that it is part of this module.
2. If ''base-chart'' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the ''@NgModule.schemas'' of this component to suppress this message.
 ("
    [datasets]="datasets"

    [ERROR ->][labels]="labels"

    [options]="options"
"): ChartComponent@6:4

Answer 1

Nunca utilicé esta biblioteca, pero con solo mirar el último código fuente de la versión (1.4.1) , debe usarse como un atributo en un canvas @Directive({selector: ''canvas[baseChart]''})

<canvas baseChart
   class="chart"
   [data]="datasets"
   [labels]="labels"
   [options]="options"
   [chartType]="''doughnut''">
</canvas>