angular - ng2-charts - 「base-chart」の既知のプロパティではないため、「datasets」にバインドできません

Question

バージョン: Cordova: 6.3.1、Gulp CLI: 1.2.2、Ionic フレームワーク: 2.0.0-rc.0、Ionic CLI バージョン: 2.1.0

---

ionic2 アプリケーションでng2-chartsを使用しています。

インポートではなく、これimport {ChartsModule} from "ng2-charts"; がimport {ChartsModule} from "ng2-charts/components/charts/charts;"原因です(issue #440)

私の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() { }
}

これは の問題かもしれないと思いましたChart.js。そしてchart.js、 npm でインストールすると、index.htmlasで参照すると 404 になることがわかりましたnode_modules/chart.js/src/chart.js。

それでChart.bundle.min.js、これが機能しなかった後にダウンロードしましたChart.js。それ自体をダウンロードしてみました。( に配置しますsrc/assets/js/...)。

この問題はng2-charts\ng2-charts.js does not export ChartsModule のコメント セクションでも解決されました。しかし、回答が提供されておらず、これが根本的な質問ではなかったため、これを投稿しました。

エラー: (エラー メッセージを抑制しても、アプリの読み込みが停止するため、役に立ちません)。

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