Ionic 3 + Angular 4 + chart.js - 配列からデータをロード

Question

これは "graf.ts"のコードです。私がしたいのは、chart.jsにfloatの配列である "array"を表示するだけですグラフ、それは私が "this.testni"グラフ "データ"を使用するときに動作しますが、私はconsole.log this.array通常の配列を表示するときにコードが鳴って ときに "this.array"を使用すると動作していませんそれはうまくいくはずです。ラベルの下でも動作します：ラベル：this.lista_valuta。ありがとう！

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { HnbProvider } from '../../providers/hnb/hnb'; 
import { Chart } from 'chart.js'; 
import { ViewChild } from '@angular/core'; 


@Component({ 
    selector: 'page-graf', 
    templateUrl: 'graf.html' 
}) 
export class GrafPage { 
    @ViewChild('lineCanvas') lineCanvas; 

    barChart: any; 

    tecaj: any; 
    lista_valuta: string[] =[ 
    "AUD", "CAD", "CZK", "DKK", "HUF", 
    "JPY", "NOK", "SEK", "CHF", "GBP", 
    "USD", "EUR", "PLN" 
    ]; 
    array = []; 
    testni = [1, 2, 3, 4]; 

    datum_poc: Date; 
    datum_kraj: Date; 
    o_valuta: string; 

    constructor(
    public navCtrl: NavController, 
    private hnbProvider:HnbProvider 
) { 
    } 

    ionViewDidLoad() { 
    } 


    dobavi_podatke(datum_poc: Date, datum_kraj: Date, o_valuta: string){ 
    this.hnbProvider.getTecajRazdoblje(datum_poc, datum_kraj).subscribe(tecaj => { 
     this.tecaj = tecaj; 
    }); 

    var i = 0; 
    for (var key in this.tecaj) { 
     if (this.tecaj[key].valuta == this.o_valuta){ 
     this.array[i] = this.tecaj[key].srednji_tecaj; 
     i++; 
     } 
    } 
    this.array.forEach(element => { 
     console.log(element); 
    }); 

    this.lineChart = new Chart(this.lineCanvas.nativeElement, 
     { 
       type: 'line', 
       data: { 
        labels: this.lista_valuta, 
        datasets: [ 
         { 
          label: "My First dataset", 
          fill: false, 
          lineTension: 0.1, 
          backgroundColor: "rgba(75,192,192,0.4)", 
          borderColor: "rgba(75,192,192,1)", 
          borderCapStyle: 'butt', 
          borderDash: [], 
          borderDashOffset: 0.0, 
          borderJoinStyle: 'miter', 
          pointBorderColor: "rgba(75,192,192,1)", 
          pointBackgroundColor: "#fff", 
          pointBorderWidth: 1, 
          pointHoverRadius: 5, 
          pointHoverBackgroundColor: "rgba(75,192,192,1)", 
          pointHoverBorderColor: "rgba(220,220,220,1)", 
          pointHoverBorderWidth: 2, 
          pointRadius: 1, 
          pointHitRadius: 10, 
          data:this.array, 
          spanGaps: false, 
         } 
        ] 
       } 
      }); 
    //console.log(this.tecaj); 
    } 
} 

Answer 1

ここでの問題は、あなたがasync方法getTecajRazdoblje()を使用しています。しかし、あなたは配列syncを埋めるようにしています。だからあなたはそれを修正する必要があります。これを試してください。

this.hnbProvider.getTecajRazdoblje(datum_poc, datum_kraj).subscribe(tecaj => 
    { 
     this.tecaj = tecaj; 
     var i = 0; 
     for (var key in this.tecaj) { 
     if (this.tecaj[key].valuta == this.o_valuta){ 
     this.array[i] = this.tecaj[key].srednji_tecaj; 
     i++; 
     } 

     this.lineChart = new Chart(this.lineCanvas.nativeElement, 
     { 
      type: 'line', 
      data: { 
       labels: this.lista_valuta, 
       datasets: [ 
        { 
         label: "My First dataset", 
         fill: false, 
         lineTension: 0.1, 
         backgroundColor: "rgba(75,192,192,0.4)", 
         borderColor: "rgba(75,192,192,1)", 
         borderCapStyle: 'butt', 
         borderDash: [], 
         borderDashOffset: 0.0, 
         borderJoinStyle: 'miter', 
         pointBorderColor: "rgba(75,192,192,1)", 
         pointBackgroundColor: "#fff", 
         pointBorderWidth: 1, 
         pointHoverRadius: 5, 
         pointHoverBackgroundColor: "rgba(75,192,192,1)", 
         pointHoverBorderColor: "rgba(220,220,220,1)", 
         pointHoverBorderWidth: 2, 
         pointRadius: 1, 
         pointHitRadius: 10, 
         data:this.array, 
         spanGaps: false, 
        } 
       ] 
      } 
     }); 
     } 
    }); 
    }