如何在typescript中的mouseover函数内只调用一次函数

Question

我正在使用angular7。在我的申请中，我显示了一个地点列表。当我将鼠标悬停在任何一个地方时，我都会调用ajax函数来将该值存储在数据库中。

但是，当我将鼠标悬停在任何一个元素上时，该ajax函数都会被调用多次。我只想调用该函数一次。

这是我的角度代码：

<div *ngFor="let place of mapData" (mouseover)="displayTagInfo($event)">
<div class="filter-name">{{place.name}}</div>
</div>

Answer 1

在最初为false的mapData数组对象中放入一个键hovered = false，因此对于每个元素，您都有hovered = false将该特定位置、对象传递给displayTagInfo($event,place)

<div *ngFor="let place of mapData" (mouseover)="displayTagInfo($event,place)">
<div class="filter-name">{{place.name}}</div>
</div>

英寸

displayTagInfo(event,place){
if(!place.hovered){
//Do what you want to do, HERE
place.hovered = true;
}
}

通过这种方式，您将能够将每个元素悬停一次。。。祝你好运：(

Answer 2

简短的回答是：在您调用的函数中，您可以添加一个布尔变量来跟踪事件是否已经触发。

您需要初始化要在其中跟踪的组件。

function displayTagInfo(event){
if (this.tagInfoDisplayHasBeenFired) {
return;
}
this.tagInfoDisplayHasBeenFired = true
//Your code
}