Значок показа в формате ngx при наведении - PullRequest
Новая
       8

Значок показа в формате ngx при наведении

0 голосов
/ 17 сентября 2018

Я пытаюсь реализовать 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>

1 Ответ

0 голосов
/ 17 сентября 2018

Используйте события mouseleave и mouseover, чтобы получить текущий элемент hovered, а затем используйте 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>
...