I am using angular7. In my application I am showing a list of places. when i hover on any one place I am calling an ajax function to store that value in database.
But when I hover on any one element, that ajax function get called multiple times. I want to call that function only once.
Here is my angular code:
<div *ngFor="let place of mapData" (mouseover)="displayTagInfo($event)">
<div class="filter-name">{{place.name}}</div>
</div>
Zee :
Put a key hovered = false in mapData array object that is initially false, so for each element you have hovered = false pass that particular place, object to displayTagInfo($event,place)\n\n<div *ngFor=\"let place of mapData\" (mouseover)=\"displayTagInfo($event,place)\">\n <div class=\"filter-name\">{{place.name}}</div>\n</div>\n\n\nIn .ts\n\ndisplayTagInfo(event,place){\n if(!place.hovered){\n //Do what you want to do, HERE\n\n place.hovered = true;\n }\n}\n\n\nThis way you will be able to hover each element once only... Good luck :)",
2019-11-18T11:23:51