Question

我使用aurelia框架和Firefox浏览器。第一次加载页面时，我收到此错误消息：＆＃39; TypeError：document.getElementById（...）为null＆＃39;

这里的打字稿代码 - 剪切：

import { EventAggregator } from 'aurelia-event-aggregator';
import { HistoricalViewAll } from "./hist-view-all";
import { DeviceData } from "./model/device-data";
import { DeviceLocDataDTO } from "./dto/device-loc-data-dto";
import { activationStrategy } from 'aurelia-router';
import { autoinject } from 'aurelia-framework';
import { View } from "aurelia-framework";

const AWS = ( window as any ).AWS;

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

// any declarations...

constructor(private histDeviceDataDto: HistoricalViewAll, private deviceData: DeviceData, private deviceDataDTO: DeviceLocDataDTO, private ea: EventAggregator) {
    console.log( "HistoricalViewSingle constructor called..." );

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

determineActivationStrategy() {
    console.log( "determineActivationStrategy() called..." );
    return activationStrategy.replace; 
}

activate( params, routeConfig, navigationInstruction ) {

    this.params = params;

    console.log( "params: " );
    console.log( params );

    this.routeConfig = routeConfig;
    console.log( "routeConfig in HistoricalViewSingle: " );
    console.log( this.routeConfig );
    this.routeConfig.navModel.setTitle = this.params.device;

    console.log( this.params.device.substr( 3, 2 ) );

    this.deviceInURL = params.device;
    console.log( this.deviceInURL );

    //necessary to get first the data before UI will be renderet... 
    return this.deviceDataDTO.postReqDeviceDataFromLocation( "devices-in-location", this.location, this.deviceSelection );
}

attached() {
    console.log( "HistoricalViewSingle is attached..." );
    this.deviceLocationList = this.deviceDataDTO.getDeviceLocationList();

    this.deviceLocationHint = "Übersicht Filiale " + this.locationName;

    if ( this.deviceLocationList.length != 0 ) {
        this.noDeviceHint = "devDataOk"
        this.setDeviceSelection( this.deviceInURL );
    } else {
        this.noDeviceHint = "Keine Sensordaten"
    }

    this.changeTimeWindow( 1 );
}

created(owningView, myView) {
    console.log("created() call in HistoricalViewSingle");
    console.log(myView);

    //this.changeTimeWindow( 1 );
}

changeTimeWindow( hours: number ) {
    var deviceId: string = this.selectedDevLocList[0].device_id;
    console.log("DeviceKey in changeTimeWindow(): " + deviceId);
    console.log(document.getElementById( 'chart-' + deviceId) + ' - chart-' + deviceId);
    const ctx1: CanvasRenderingContext2D = ( document.getElementById( 'chart-' + deviceId ) as any ).getContext( '2d' );
    this.histDeviceDataDto.changeTimeWindowForOneDevice( hours, deviceId, ctx1 );
}
}

错误将在此行中引起：

const ctx1: CanvasRenderingContext2D = ( document.getElementById( 'chart-' + deviceId ) as any ).getContext( '2d' );

这里是html代码：

<template> <require from="./hist-view-all"></require>
<div class="col-sm-12">
    <h1>
            <span id="filiale">${deviceLocationHint}</span>
    </h1>

    <div repeat.for="deviceData of deviceLocationList">
            <div class="pull-left">
                    <button class="btn btn-link btn-block" click.delegate="setDeviceSelection(deviceData.device_id)">${deviceData.device_id}</button>
            </div>
    </div>
    <h3>&nbsp</h3>

    <div class="margin">
            <div class="btn-group" role="group" aria-label="..." if.bind="noDeviceHint === 'devDataOk'">
                    <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="deviceData of selectedDevLocList">
                            <div class="panel panel-default">
                                    <div class="panel-heading">
                                            <h2 class="panel-title">${deviceData.boardType}</h2>
                                            <small>${deviceData.locationName} ${deviceData.room}</small>
                                    </div>
                                    <div class="panel-body">
                                            <canvas class="chart" id="chart-${deviceData.device_id}"></canvas>
                                    </div>
                            </div>
                    </div>
            </div>
    </div>
</div>
</template>

首次加载页面后，我点击按钮＆＃39; 8h＆＃39;例如，我没有收到错误，chartjs图中的数据将呈现正常。画布ID可能是这样的＆＃39; chart-am-ZH-Office＆＃39;并且在第一次页面加载时它已经是正确的。我还尝试在生命周期方法created（）中调用方法changeTimeWindow（），但是出现了相同的错误。

有什么建议吗？感谢

Aurelia TypeError：document.getElementById（...）为null，这仅由第一页加载

0 个答案: