How to call a function only once inside mouseover function in typescript?

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>