ng2-çizelgeleri - 'Veri kümeleri'ne bağlanılamıyor çünkü' base-chart 'bilinen bir özelliği olmadığından

Question

Sürümler: Cordova: 6.3.1, Gulp CLI: 1.2.2, İyonik çerçeve: 2.0. 0-rc.0, İyonik CLI Versiyon: 2.1.0

---

benim ionic2 uygulamada ng2-charts kullanıyorum.

İthalat değil import {ChartsModule} from "ng2-charts"; ama import {ChartsModule} from "ng2-charts/components/charts/charts;" nedeniyle this (issue #440)

Benim tüm 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() { } 
} 

Bu kudretini düşünce Chart.js ile ilgili bir sorun. Ve npm yüklü chart.js'un, index.html benim node_modules/chart.js/src/chart.js olarak başvurduğumda bir 404 ile sonuçlandığını buldum.

Bu yüzden işe yaramazsa Chart.bundle.min.js karşıdan yükledim. Karşıdan yükleme Chart.js kendisini denedim. (src/assets/js/...'a yerleştirerek). Bu sorun ayrıca, ng2-charts\ng2-charts.js does not export ChartsModule'un yorum bölümünde de ele alınmıştır. Fakat hiçbir cevap verilmediğinden ve bu asıl soru olmadığı için bunu yayınladım.

Hata: (Hata iletisini bastıran uygulama yüklendiğimde durdurulduğundan dolayı yardımcı olmaz).

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

Bu kütüphaneyi hiç kullanmadım, ama sadece the latest (1.4.1) version's source code bakarak, bir tuval @Directive({selector: 'canvas[baseChart]'})

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