如何在Angular中使用光标事件？

当光标指向

amount

将显示所有小数点时，如何创建鼠标事件？（请参见下面的示例）

html

滑鼠

129.24%

滑鼠

129.2445131545%
 

另一个例子

---

您可以在段落标记上使用mouseenter和mouseleave事件

---

选中此项

您应该使用百分比管道或十进制管道来设置数字格式：

<p class="amount">
    <span class="short">{{amount.total | percent:'1.2-2'}}</span>
    <span class="long">{{amount.total | percent:'1.8-8'}}</span>
</p>

---

（或者我还没有测试过这个确切的代码）

你很接近。。。您可以在HTML模板中使用

mouseenter

和

mouseleave

就这样,

<p (mouseenter)="mouseEntered = true" (mouseleave)="mouseEntered = false">
  {{ mouseEntered ? amount : amount.toFixed(2) }}%
</p>

注意：我认为如果你把

金额

当作一个数字，而不是一个字符串，效果会更好。百分比符号可以添加到HTML中

元素中的大括号之后，就像我在上面的HTML中所做的那样

<p class="amount">
    <span class="short">{{amount.total | percent:'1.2-2'}}</span>
    <span class="long">{{amount.total | percent:'1.8-8'}}</span>
</p>

.amount .long {
    display: none;
}
.amount .short{
    display: block;
}
.amount:hover .long {
    display: block;
}
.amount:hover .short{
    display: none;
}

<p (mouseenter)="mouseEntered = true" (mouseleave)="mouseEntered = false">
  {{ mouseEntered ? amount : amount.toFixed(2) }}%
</p>

mouseEntered = false;
amount = 129.2445131545;