我正在尝试为我当地的游泳俱乐部创建一个可出租储物柜的解决方案。每个储物柜(大约 1800 个)的数据都是从 SQL 数据库生成的，我分别映射了每个更衣室。 当我尝试重新绑定图像映射时出现问题。我希望用户能够翻阅年份，看看在特定年份租用了哪个储物柜。
为了让用户有更好的概览，我用红色或绿色填充了每个储物柜区域，由于背景图像显示了每个储物柜的编号(名称)，因此不透明度较低。工具提示显示更衣室和号码，会员的全名，最后付款日期，储物柜是否可用以及注释字段。
但是当用户更改年份时，我尝试为每个单独的储物柜设置新的工具提示和可能的新颜色，我收到以下错误： "类型错误： 无法读取 null 的属性'0'">
此错误仅阻止显示工具提示。单击该区域仍会将用户带到正确的储物柜，并且单击事件具有正确的数据，正确的年份，正确的会员，正确的付款日期等。
我尝试了"取消绑定"，"重新绑定"，"set_options"的几种组合，但并不幸运。
要么我设法将工具提示更新为正确的值，但颜色只是再次应用，这会导致在几个开关后出现一堆黑色或红色方块(没有抛出错误)，或者我完全收获了颜色并且工具提示消失了。试图通过.attr("usemap" ， "#mapId") oder .useMap = "mapId"也没有成功。
一些网页
<img id="room0img" src="assetsLockerLayoutsfemale1.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 函数尝试以当前形式重新应用/重新绑定/任何内容，导致显示正确的颜色，但会杀死工具提示。 它会在Init上得到calle ，当用户更改他想要查看/编辑的年份时。 变量在每次调用之前设置，并使用正确的数据表示尊重年份
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的不同函数中创建的。 如果我只是重新应用选项，它们会正确更新，但颜色会相互叠加。 我控制台.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 nulln
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 上，并且它显示正确的数字，则在年份更改后将鼠标悬停在它上面并且它显示为 0，我认为这是因为它是我的 html 文件中的第一个。
再次阅读纪录片后(...一次又一次...我终于实现了我想要的！
我想我"错误"地使用了图像映射器：我通过选择它们来着色区域
我只需要取消选择它们，然后我就可以用正确的颜色和工具提示重新绑定它们。此外，我还必须从选项的"onConfigure"属性中删除"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);