无法正确重新绑定imagemapster以设置新的工具提示(TypeError:无法读取null的属性“ 0”)

时间:2019-08-27 10:00:06

标签: javascript jquery html angular imagemapster

我正在尝试为当地游泳俱乐部创建可出租储物柜的解决方案。每个更衣室的数据(大约1800)是从SQL数据库生成的,我分别映射了每个更衣室。 当我尝试重新绑定我的图像映射时,会出现问题。我希望用户能够浏览这些年份,并查看特定年份租用的储物柜。

为了让用户有更好的概览,我用红色或绿色填充了每个储物柜区域,不透明度较低,因为背景图像显示了每个储物柜的编号(名称)。工具提示会显示更衣室和号码,会员的全名,最后一次付款日期(如果可以使用更衣室的话)以及注释字段。

但是,当用户更改年份时,我尝试为每个单独的储物柜设置新的工具提示以及可能的新颜色时,出现以下错误: “ TypeError:无法读取null的属性'0'”

此错误仅阻止显示工具提示。单击该区域仍会将用户带到正确的储物柜,并且click事件具有正确的数据,正确的年份,正确的成员,正确的付款日期等。

我尝试了“ unbind”,“ rebind”,“ set_options”的几种组合,但并不幸运。

要么我设法将工具提示更新为正确的值,但是只是简单地再次应用了颜色,经过几次切换(没有引发错误),结果是一堆黑色或红色方块,或者我完全重新获得了颜色工具提示不见了。试图通过via.attr(“ usemap”,“ #mapId”)oder .useMap =“ mapId”也不起作用。

一些HTML

            <img id="room0img" src="\assets\LockerLayouts\female1.PNG" usemap="#room0map" [hidden]="!visibility[0]" width="1230px">

                <map name="room0map" id="room0map" [hidden]="!visibility[0]">

                    <area alt="365" name="365" coords="22,167,105,193" shape="rect" href="#">
                    <area alt="364" name="364" coords="22,196,105,221" shape="rect" href="#">
                    <area alt="363" name="363" coords="22,224,105,250" shape="rect" href="#">

我的.ts函数尝试以当前形式重新应用/重新绑定/以任何形式显示,从而显示正确的颜色,但会杀死工具提示。它会在onInit上调用,并且当用户更改要查看/编辑的年份时。在每次致电之前设置变量,并使用相应年份的正确数据

if (this.initialLoad === true){
  $('#room' + this.roomId + 'img').mapster(this.basic_opts);
} else {

  $('#room' + this.roomId + 'img').mapster();
  $('#room' + this.roomId + 'img').attr("usemap", '#room' + this.roomId + 'map');
  $('#room' + this.roomId + 'img').mapster( "rebind" ,this.basic_opts);
}
  $('#room' + this.roomId + 'img').mapster('set', this.rented, this.unrentedLockers , this.unrented_opts);
  $('#room' + this.roomId + 'img').mapster('set', this.rented, this.unrentedBrokenLockers , this.unrentedBroken_opts);
  $('#room' + this.roomId + 'img').mapster('set', this.rented, this.rentedPaidLockers , this.rentedPaid_opts);
  $('#room' + this.roomId + 'img').mapster('set', this.rented, this.rentedPaidBrokenLockers , this.rentedPaidBroken_opts);
  $('#room' + this.roomId + 'img').mapster('set', this.rented, this.rentedUnpaidLockers , this.rentedUnpaid_opts);
  $('#room' + this.roomId + 'img').mapster('set', this.rented, this.rentedUnpaidBrokenLockers , this.rentedUnpaidBroken_opts);

工具提示本身是通过称为onConfigured的不同函数创建的。如果我只是简单地重新应用选项,它们会正确更新,但是颜色会彼此叠加。我console.log()基本上一切。数据在那里,只是没有链接到图像地图。区域ID是根据储物柜的名称设置的。当我重新绑定.mapster时,数据丢失并且无法重新应用。但是正如我所说,只有工具提示会丢失其链接,onClick()事件仍会产生正确的结果,该结果链接到另一个页面,该页面使用户可以编辑储物柜。

完全错误:

TypeError: Cannot read property '0' of null
core.js:7187
message:"Cannot read property '0' of null"
stack:"TypeError: Cannot read property '0' of null\n    
at u.MapData.getAllDataForArea (http://localhost:4200/scripts.js:18:25591)\n    
at HTMLAreaElement.r (http://localhost:4200/scripts.js:18:22656)\n    
at HTMLAreaElement.n.mouseover (http://localhost:4200/scripts.js:18:24547)\n    
at HTMLAreaElement.dispatch (http://localhost:4200/scripts.js:2:42571)\n    
at HTMLAreaElement.v.handle (http://localhost:4200/scripts.js:2:40572)\n    
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3240:31)\n    
at Object.onInvokeTask (http://localhost:4200/vendor.js:68456:33)\n    
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3239:60)\n    
at Zone.runTask (http://localhost:4200/polyfills.js:3017:47)\n    
at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:3314:34)"

该属性根据悬停的区域而变化,但是它不是“正确的”数字。如果我在初始页面加载后将鼠标悬停在储物柜365上,并且显示正确的数字,则在年份更改后将鼠标悬停在储物柜365上并显示0,我认为这是因为这是我的html文件中的第一个。 >

1 个答案:

答案 0 :(得分:0)

再次读完纪录片后(……一次又一次……),我终于设法实现了我想要的东西!

我认为我使用了imagemapster“ wrong”:我通过选择区域为区域着色

我只需要取消所有选择,然后就可以使用正确的颜色和工具提示重新绑定它们。另外我还必须从选项的“ onConfigured”属性中删除“ setToolTips()”,并在应用/重新绑定后调用它

if (this.initialLoad === true){
  $('#room' + this.roomId + 'img').mapster(this.basic_opts)
  this.setToolTips()
} else {
  $('#room' + this.roomId + 'img').mapster("deselect");
  $('#room' + this.roomId + 'img').mapster( "rebind" ,this.basic_opts);
  this.setToolTips()

}
  $('#room' + this.roomId + 'img').mapster('set', this.rented, this.unrentedLockers , this.unrented_opts);
  $('#room' + this.roomId + 'img').mapster('set', this.rented, this.unrentedBrokenLockers , this.unrentedBroken_opts);
  $('#room' + this.roomId + 'img').mapster('set', this.rented, this.rentedPaidLockers , this.rentedPaid_opts);
  $('#room' + this.roomId + 'img').mapster('set', this.rented, this.rentedPaidBrokenLockers , this.rentedPaidBroken_opts);
  $('#room' + this.roomId + 'img').mapster('set', this.rented, this.rentedUnpaidLockers , this.rentedUnpaid_opts);
  $('#room' + this.roomId + 'img').mapster('set', this.rented, this.rentedUnpaidBrokenLockers , this.rentedUnpaidBroken_opts);