Question

问题是它在repeat.for循环中不起作用。如果我删除repeat.for然后它工作正常，也就是说，它的图表被渲染。我怀疑我有组件生命周期的错误。我首先在激活的方法和方法附件中获取数据，我调用获取画布引用的方法来渲染图表。错误消息如下： “TypeError：_this.theCanvas未定义”

这里的观点：

<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

    }

}

请问我的错误是什么建议？

Answer 1

我认为你可以在你的代码中定义一些canvases=[]，然后使用类似的东西：

canvases.ref="canvases[$index]"

当我在repeat.for循环中渲染更多图表时，Aurelia ref = theCanvas未定义

1 个答案: