2017-12-23 9 views
0

問題は、repeat.forループでrefが動作しないことです。私はrepeat.forを削除すると、うまく動作します。つまり、グラフがレンダリングされます。私はコンポーネントのライフサイクルにバグがあると思う。私はまずアクティブ化されたメソッドでデータを取得し、メソッドの添付ファイルで、グラフをレンダリングするためのキャンバス参照を取得するメソッドを呼び出します。 エラーメッセージは以下の通りです: 「例外TypeError:_this.theCanvasは未定義である」ここAurelia ref = theCanvasは、repeat.forループでさらにチャートをレンダリングするときには未定義です

ビュー:ここ

<template> 
<div class="col-sm-12"> 
     <h1> 
       Historie <span id="filiale">Filialen an allen Standorte</span> 
     </h1> 

     <div class="margin"> 
       <div class="btn-group" role="group" aria-label="..."> 
         <button name="defaultbutton" type="button" click.delegate="changeTimeWindow(1)" class="btn btn-default">1h</button> 
         <button type="button" click.delegate="changeTimeWindow(8)" class="btn btn-default">8h</button> 
         <button type="button" click.delegate="changeTimeWindow(24)" class="btn btn-default">1d</button> 
         <button type="button" click.delegate="changeTimeWindow(120)" class="btn btn-default">5d</button> 
       </div> 

       <div class="device-container"> 
         <div repeat.for="device of devices"> 
           <div class="panel panel-default"> 
             <div class="panel-heading"> 
               <h2 class="panel-title">${device.boardType}</h2> 
               <small>${device.locationName} ${device.room}</small> 
             </div> 
             <div class="panel-body"> 
               <!-- <canvas class="chart" id="chart-${device.location_id}"></canvas> --> 
               <canvas class="chart" ref=theCanvas></canvas> 
             </div> 
           </div> 
         </div> 
       </div> 
     </div> 
</template> 

ビューモデル:

import 'aws-sdk/dist/aws-sdk'; 
import * as _ from "lodash"; 
import * as Chart from "chart.js"; // TODO: use @types/chartjs (then the null check below is not needed anymore) 
import * as Moment from "moment"; 
import { AmbientDevice } from "./model/ambient-device"; 
import { DeviceData } from "./model/device-data"; 
import { DeviceLocDataDTO } from "./dto/device-loc-data-dto"; 
import { autoinject } from 'aurelia-framework'; 
import { View } from "aurelia-framework"; 

@autoinject(DeviceData) 
@autoinject(DeviceLocDataDTO) 
export class HistoricalViewAll { 

    private location: string; 
    private deviceSelection: string; 
    private devices: Array<DeviceData> = new Array<DeviceData>(); 
    private timewindowHours: number = 8; 
    private findDevice: DeviceData = new DeviceData(); 
    private theCanvas; 
    private ctx: CanvasRenderingContext2D; 

    constructor(private deviceDataDTO: DeviceLocDataDTO, private deviceData: DeviceData) { 
     console.log("HistViewAll constructor called..."); 
     .. 
     .. 
     .. 
     .. 


     // init necessary to show correct boardType and deviceName in device-container 
     this.devices.push(this.deviceData); 
     //this.theCanvas = new HTMLCanvasElement(); 

     this.location = "Zurich"; 
     this.deviceSelection = "allDevices"; 
    } 

    activate(params, routeConfig, navigationInstruction) { 
     //necessary to get first the data before UI will be renderet... 
     return this.deviceDataDTO.getReqAllDeviceDataFromAllLocation(); 
    } 

    created(owningView: View, myView: View) { 
     console.log("created() call in HistoricalViewAll"); 
     console.log(owningView); 
     console.log(myView); 
    } 

    bind(bindingContext: Object, overrideContext: Object) { 
     console.log("HistoricalViewAll is bindet..."); 
     console.log(bindingContext); 
     console.log(overrideContext); 
     //this.devices = this.deviceDataDTO.getDeviceLocationList(); 
     console.log(this.devices); 
     console.log(bindingContext); 
    } 

    attached() { 
     console.log("HistoricalViewAll is attached..."); 
     this.devices = this.deviceDataDTO.getDeviceLocationList(); 
     this.changeTimeWindow(this.timewindowHours); 
    } 

    getDevices() { 
     return this.devices; 
    } 

    changeTimeWindow(hours: number) { 
     this.timewindowHours = hours; 

     this.devices.forEach((device, i, arr) => { 
      //const ctx: CanvasRenderingContext2D = (document.getElementById('chart-' + device.location_id) as any).getContext('2d'); 
      //console.log(this.ctx); 
      //console.log(document.getElementById('chart-' + device.location_id)); 
      //if (typeof this.theCanvas !== null) { 
       this.ctx = this.theCanvas.getContext('2d'); 
       this.drawDevice(this.ctx, device.locationName); 
      //} 
     }); 
    } 

    changeTimeWindowForOneDevice(hours: number, deviceKey: string, ctx: CanvasRenderingContext2D) { 

     this.timewindowHours = hours; 

     Object.assign(this.findDevice, this.devices.find(device => device.device_id === deviceKey)); 
     this.drawDevice(ctx, deviceKey); 
    } 

    drawDevice(ctx: CanvasRenderingContext2D, devicename: string, correctionFactor: number = 1) { 

    // the chart 

    } 

} 

してください任意の提案どのような私は間違っている?

+0

を。ソリューションはthis.devices = this.deviceDataDTO.getDeviceLocationList();を移動することでした。作成されたライフサイクルメソッド()では、添付されたメソッドが呼び出されると、デバイス内のデータが準備されます。 refはrepeat.forと一緒に使用されています... – oxid2178

答えて

1

私はあなたのコード内のいくつかのcanvases=[]を定義し、次にようなものを使用することができると思う:私は4日後にソリューションを自分自身を発見した

canvases.ref="canvases[$index]"

関連する問題