如何使用同步表在角度中的行悬停上显示图标

Question

如何在同步表中的行悬停上显示图标。

请参阅以下提供的屏幕截图（从gmail捕获）

我正在使用angular7.x和Syncfusion UI组件。

如果有任何答案，请告诉我 预先感谢

Answer 1

您只需将自己的组件附加到Grid行的最后一个子项上，然后将其悬停。代码段，

export class AppComponent {
public data: Object[];
public initialPage: Object;
public button: HTMLElement;

@ViewChild('grid')
public gridInstance : GridComponent ;  

ngOnInit(): void {
    this.data = data;
    this.initialPage = { pageSizes: true, pageCount: 4 };
    let btn = document.createElement("input");
    btn.type = "button";
    btn.id = "btn";
    btn.classList.add("e-btn");
    btn.value = "button";
    btn.style.marginLeft = "10px";
    btn.onclick = function(e) {
      console.log("Button clicked");
    };
    this.button = btn;
}

load(args) {
  this.gridInstance.element.addEventListener("mouseover", function(e){
    if((e.target as HTMLElement).classList.contains("e-rowcell")) {
        let ele: Element = e.target as Element;
        let row = parentsUntil(ele, "e-row");

        let previousButton = document.getElementById("btn");
        if(!isNullOrUndefined(previousButton)) {
          previousButton.remove();
        }

        row.lastChild.appendChild(this.button);
    }
  }.bind(this))
}

}

示例供您参考：https://stackblitz.com/edit/angular-hjfcyi?file=main.ts

在这里，我在ngOnInit中创建了一个新按钮，并将该按钮悬停在每行最后一个子项中。

注意：我已经使用Grid load事件将mouseover事件绑定到Grid。