我正在尝试为当地游泳俱乐部创建可出租储物柜的解决方案。每个更衣室的数据(大约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文件中的第一个。 >
答案 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);