javascript - 如果元素的内容溢出，则在 html 元素内显示图标

Question

我想在 div 内的内容溢出时显示复制到剪贴板图标

我有四个 div 的 ng，如果其中任何一个 div 溢出，我想显示相应 div 的图标。

<div *ngFor div of FourDivs (mouseenter)="IfDivHasOverflow($event)">
  <div *ngIf="hasOverflow"></div>
</div>

脚本: @成分 我的组件(){

 hasOverFlow:boolean = false;

 IfDivHasOverflow(event) {
   if(event.scrollHeight < event.cleintHeight) {
    this.hasOverflow = true;
   }
 }

问题是“hasOverflow”对于 ngfor 重复中的每个 div 都解析为 true。所有四个 div 内部都显示一个图标，而需要的是具有溢出以包含该图标的特定 div。

有办法解决这个问题吗？

Answer 1

基本上，每个 div 都需要一个 hasOverflow 标志。

尝试下面的代码:

<div *ngFor="div of FourDivs" (mouseenter)="IfDivHasOverflow($event, div)">
  <div *ngIf="div.hasOverflow"></div>
</div>


 IfDivHasOverflow(event, div) {
    div.hasOverflow = false;
   if(event.scrollHeight < event.cleintHeight) {
    div.hasOverflow = true;
   }
 }