Question

我正在尝试实现ngx-datatable，并且仅在将鼠标悬停在行上方时才需要显示删除图标。现在，当我将光标放在行上时，它在所有行而不是正确的行中显示删除图标。那么，这样做的正确方法是什么？

<ngx-datatable [rows]="rows"
                class="material"
               [columns]="columns"
               [columnMode]="'force'"
               [headerHeight]="0"
               [footerHeight]="50"
               [rowHeight]="'auto'"
               [reorderable]="reorderable">
  <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
          Title
      </ng-template>
      <ng-template  let-row="row" ngx-datatable-cell-template>
          <span class="title-date">{{row.title}} </span> <span class="author"> - {{row.author}} -</span>
      </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
          Date
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
          <span class="title-date">{{row.created_at | dfnsDistanceInWordsToNow }}</span>
      </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Action
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
          <mat-icon (click)="openDialogWithoutRef(row._id)" class="show-on-hover" class="inline-icon">delete</mat-icon>
      </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

Answer 1

使用mouseleave和mouseover事件获取当前悬停的元素，然后使用ngClass动态设置类

toggle=[];


<ng-template let-row="row" ngx-datatable-cell-template>
          <mat-icon (click)="openDialogWithoutRef(row._id)" (mouseover)="toggle[row._d]=true"
          (mouseleave)="toggle[row._id]=false"
 [ngClass]="{'show-on-hover':toggle[row._id]" class="inline-icon">delete</mat-icon>
      </ng-template>

Answer 2

ngx-datatable具有 activate 输出，可用于监听鼠标单击，mousenter或keyup事件。因此，您只需执行以下操作即可：

<ngx-datatable
      class="material"
      [rows]="users$ | async"
      [columnMode]="ColumnMode.force"
      [headerHeight]="50"
      [footerHeight]="50"
      rowHeight="auto"
      (activate)="onActivate($event)"
    >
      <ngx-datatable-column name="First Name">
        <ng-template let-row="row" ngx-datatable-cell-template>{{ row && row.staff_id.first_name }}</ng-template>
      </ngx-datatable-column>
...

因此，您可以编写一个函数来处理mouseenter事件。唯一的问题是它不会触发mouseleave事件，而这正是我一直试图找出的原因。

PS：对于您的用例，您应该检查事件类型以确保它是mouseenter。像这样

onActivate (e) {
    const { type, row } = e;
    if (type === 'mouseenter') {
      this.showAction = row._id;
    }
}

这是文档的链接

https://swimlane.gitbook.io/ngx-datatable/api/table/outputs#activate

我希望这对您有帮助...

欢呼

Ngx-datatable悬停显示图标

2 个答案: