如果元素的内容溢出，则在 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 都解析为真。所有四个 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;
   }
 }

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

show an icon inside a html element if the element has content that is overflowing

javascript

overflow

angular-ng-if

ngfor

angular