angular - HTTP応答でデータを受け取った後、データをng2円グラフに割り当てることができません

Question

chart.js に依存する NG2-Chart ライブラリの piechart を使用している場合、HTML マークアップは次のようになります。

<h2>Home</h2>
<div style="display: block">
    <canvas baseChart class="chart"
            [data]="pieChartData"
            [labels]="pieChartLabels"
            [chartType]="pie"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)">
    </canvas>
</div>

私は次のコードを書きましたが、それは完全に正常に動作します。グラフが表示され、イベントハンドラへの呼び出しも取得できます。私のコンポーネントコード(動作中)は次のようになります:

import {Component, OnInit, AfterViewInit, AfterContentInit} from '@angular/core';
import {NgClass} from '@angular/common';

import {PieChartData} from '../shared/pie-chart-data';
import {HotelsService} from '../components/hotel/hotels.service';
import {Hotel} from '../entities/hotel';


import * as _ from 'underscore/underscore';

@Component({
    selector:'home'
    , templateUrl:'app/home/home.component.html'
})
export class HomeComponent implements OnInit{
    hotels: Hotel[];
    hotelCountByCity; 
    data = new PieChartData();

    pieChartData = [];
    pieChartLabels=[];

    constructor(private _hotelsService: HotelsService){}

    ngOnInit(){
        this.getActiveHotelsByCity();        

        console.log("On Init");
    }

    // events
    public chartClicked(e:any):void {
        // TODO : should open another chart which is not decided.
    }

    public chartHovered(e:any):void {
        // TODO : do something
    }

    private getActiveHotelsByCity(){ 
        //this.data.pieChartType = "pie";
        this.pieChartLabels = ["One", "Two", "Three"]; 
        this.pieChartData = [100,200,300];
    }
}

しかし、Web サービスからデータを取得して円グラフに割り当てようとすると、奇妙なエラーが発生します。私のコンポーネントコード(動作していません):

import {Component, OnInit, AfterViewInit, AfterContentInit} from '@angular/core';
import {NgClass} from '@angular/common';

import {PieChartData} from '../shared/pie-chart-data';
import {HotelsService} from '../components/hotel/hotels.service';
import {Hotel} from '../entities/hotel';

import * as _ from 'underscore/underscore';

@Component({
    selector:'home'
    , templateUrl:'app/home/home.component.html'
})
export class HomeComponent implements OnInit{
    hotels: Hotel[];
    hotelCountByCity; 
    data = new PieChartData();

pieChartData = [];
pieChartLabels=[];

constructor(private _hotelsService: HotelsService){}

ngOnInit(){
    this.getActiveHotelsByCity();        

    console.log("On Init");
}

// events
public chartClicked(e:any):void {
    // TODO : should open another chart which is not decided.
}



   public chartHovered(e:any):void {
        // TODO : do something
    }

    private getActiveHotelsByCity(){  
        this._hotelsService.getAllActiveHotels()
                                .subscribe(
                                    res => this.hotelCountByCity =
                                                    _.countBy(
                                                        res.data.hotels
                                                        ,function(hotel: Hotel) {
                                                            return hotel.address.city;
                                                        })
                                    ,null
                                    , ()=> {
                                        this.pieChartLabels = _.keys(this.hotelCountByCity);
                                        this.pieChartData = _.values(this.hotelCountByCity);
                                        console.log("Reached success part of request");
                                    }
                                );
    }
}

最初に取得するエラーのスタックトレスは次のとおりです。

例外: キャッチされていません (約束): TypeError: ゲッターしかない [オブジェクトオブジェクト] のプロパティスタックを設定できません TypeError: assignAll にゲッターしかない [オブジェクトオブジェクト] のプロパティスタックを設定できません ( http://localhost:3000 /node_modules/zone.js/dist/zone.js:704:29 ) で ViewWrappedError.ZoneAwareError ( http://localhost:3000/node_modules/zone.js/dist/zone.js:775:16 ) で ViewWrappedError.BaseError [コンストラクタとして] ( http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1104:38 ) ViewWrappedError.WrappedError [コンストラクタとして] ( http://localhost:3000/node_modules /@angular/core/bundles/core.umd.js:1133:20 ) 新しい ViewWrappedError で (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5106:20 ) _View_HomeComponent_Host0.DebugAppView._rethrowWithContext ( http://localhost:3000/node_modules/@angular/core/bundles ) /core.umd.js:9427:27 ) _View_HomeComponent_Host0.DebugAppView.detectChanges ( http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9413:22 ) で ViewRef_.detectChanges ( http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7398:24 ) RouterOutlet.activate ( http://localhost:3000/node_modules/@angular/router/bundles/router ) .umd.js:3458:46 ) ActivateRoutes.placeComponentIntoOutlet (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2955:20 ) ActivateRoutes.activateRoutes ( http://localhost:3000/node_modules/@angular/router/bundles/router ) .umd.js:2933:26 ) at eval ( http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2902:23 ) at Array.forEach (ネイティブ) at ActivateRoutes.activateChildRoutes ( http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2901:33 ) ActivateRoutes.activate ( http://localhost:3000/node_modules/@angular/router/bundles/ ) router.umd.js:2896:18 )

インターネットで調べてみると、これは本当のエラーではないことがわかりました。インターネットで実際のエラーを特定するためのアドバイスを見つけました。実際のエラーは次のとおりです。

「TypeError: Chart.controllers[meta.type] は Chart.Controller のコンストラクタではありません。( http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8508:24 ) オブジェクトで。 helpers.each ( http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:9345:15 ) の Chart.Controller.buildOrUpdateControllers ( http://localhost:3000/node_modules/chart.js ) /dist/Chart.bundle.js:8497:12 ) で Chart.Controller.initialize ( http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8356:7 ) で、新しいチャートで。新しいチャート ( http://localhost:3000/node_modules/chart.js/dist/Chart ) のコントローラー ( http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8339:6 )。 bundle.js:10684:21) BaseChartDirective.getChartBuilder ( http://localhost:3000/node_modules/ng2-charts/components/charts/charts.js:73:16 )で BaseChartDirective.refresh ( http://localhost:3000/node_modules/ng2-charts ) /components/charts/charts.js:114:27 ) BaseChartDirective.ngOnInit ( http://localhost:3000/node_modules/ng2-charts/components/charts/charts.js:18:18 ) で Wrapper_BaseChartDirective.detectChangesInInputProps (/ ChartsModule/BaseChartDirective/wrapper.ngfactory.js:89:53) at _View_HomeComponent0.detectChangesInternal (/AppModule/HomeComponent/component.ngfactory.js:74:32) at _View_HomeComponent0.AppView.detectChanges ( http://localhost:3000/node_modules) /@angular/core/bundles/core.umd.js:9305:18) _View_HomeComponent0.DebugAppView.detectChanges ( http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48 ) で _View_HomeComponent_Host0.AppView.detectViewChildrenChanges ( http://localhost:3000/ node_modules/@angular/core/bundles/core.umd.js:9331:23 ) at _View_HomeComponent_Host0.detectChangesInternal (/AppModule/HomeComponent/host.ngfactory.js:33:8)"

ここからどこへ行けばいいのかわからない。ng2-charts gihub repo に問題を投稿しました。私は立ち往生しており、あなたの助けに本当に感謝しています.

score 0 · Accepted Answer

私はインターネットでいくつかの調査を行い、ドキュメントを読みました。私の問題に対する明確な答えが見つかりませんでした。次のプロセスは私のために働いた：

chart.js を 2.4.0 から 2.3.0 にダウングレードしました
データが RESTApi から受信されたかどうかを示すブール値をコンポーネントに追加しました。そのフラグを使用して、*ngIf を使用してキャンバスを表示しました。

HTML マークアップは次のようになります。

<canvas 
            baseChart 
            class="chart"
            [data]="data.pieChartData"
            [labels]="data.pieChartLabels"
            [chartType]="data.pieChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"
            *ngIf="isDataAvailable"
            >
    </canvas>

angular - HTTP応答でデータを受け取った後、データをng2円グラフに割り当てることができません

1 に答える 1

Related

Reference