Angular 9, ngx-datatable кнопка показа при наведении курсора - PullRequest
Новая
       36

Angular 9, ngx-datatable кнопка показа при наведении курсора

0 голосов
/ 24 февраля 2020

Я пытаюсь показать ссылку на указатель мыши на соответствующей ячейке ngx-datatable, но вместо этого она показывает ссылку на все строки этого конкретного столбца, вот код, который я делаю: 

<ngx-datatable
        class="material ml-0 mr-0"
        [rows]="users"
        [columnMode]="'flex'"
        [headerHeight]="50"
        [footerHeight]="50"
        [limit]="10"
        [rowHeight]="'auto'">
        <ngx-datatable-column name="User Name" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
            {{ row?.userName }}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Role" [flexGrow]="1">
            <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template let-value="value">
                <div (mouseenter)="showRoleOpt(rowIndex,true, $event)" (mouseleave)="showRoleOpt(rowIndex,false, $event)">{{ row?.role }} <a *ngIf="showRoleOptions">Change</a></div>
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="First Name" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row?.firstName }}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Last Name" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row?.lastName }}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Email" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row?.email }}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Phone Number" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row?.phoneNumber }}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Actions" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
            <button mat-icon-button mat-sm-button color="primary" class="mr-1" (click)="openPopUp(row)"><mat-icon>edit</mat-icon></button>
            <button mat-icon-button mat-sm-button color="warn" (click)="deleteItem(row)"><mat-icon>delete</mat-icon></button>
            </ng-template>
        </ngx-datatable-column>
</ngx-datatable>

Код TS: 

showRoleOpt(row, opt: boolean, $event) {
    console.log($event.target);
    this.showRoleOptions = opt;
  }

Я попытался указать идентификатор в div, пытаясь проверить событие, если есть что-то, с чем я могу что-то сделать. Но не понимаю.

1 Ответ

0 голосов
/ 24 февраля 2020

Причина такого поведения заключается в том, что вы используете один и тот же flag для всех rows, поэтому у вас может быть флаг в каждой строке: 

<ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template let-value="value">
                <div (mouseenter)="showRoleOpt(row,true, $event)" (mouseleave)="showRoleOpt(row,false, $event)">{{ row?.role }} <a *ngIf="row.showRoleOptions">Change</a></div>
</ng-template>

ts: 

showRoleOpt(row:any, opt: boolean, $event) {
    console.log($event.target);
    row.showRoleOptions = opt;
}
...