在 angular 的 ngx 数据表中鼠标悬停时获取任何特定单元格的详细信息时出现问题

Question

I am using ngx datatable, importing my data from a json. I have added some more details to be shown in Column 'domain'. So while hovering to a particular cell of Column 'domain', i want to get more details about that cell only, but I am getting more details of all cells of that particular column.

//HTML that I am using

<ngx-datatable-column name="App Domain" [flexGrow]="2" >
            <ng-template let-row="row" ngx-datatable-cell-template>
                <div (mouseover)="showText=(true)" (mouseout)="showText=(false)" >{{row?.domain}}</div>
                <div *ngIf="!showText"></div>
                <div *ngIf="showText">
                    {{row?.vp}}<br>
                    {{row?.cpu}}<br>
                    {{row?.vm}}<br>
                    {{row?.maxspeed}}</div>
            </ng-template>
        </ngx-datatable-column> 

//HTML datatable properties in my code

<ngx-datatable class="material full screen" class="bootstrap" [rows]="rows" [columnMode]="'flex'" [headerHeight]="50" [footerHeight]="50" rowHeight="auto">

//component.ts

export class DashboardComponent implements OnInit {
  title = 'test-dashboard';
  rows=[ ]
  apiResponseData: any = [];
  apiData = []
  pingApiInterval = 300000; 
  showText: boolean;
  
constructor(private dashboardService: DashboardService) { this.showText = false; }

Tried various approaches, but I failed.

Answer 1

The problem is that you are using the same variable showText for all rows.

For getting the details of a particular cell you can use a variable ( showedIndex ) for storing the index of the row hovered and then check it for showing only his information.

<ngx-datatable-column name="App Domain" [flexGrow]="2" >
            <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
                <div (mouseover)="showedIndex = rowIndex; showText=true" (mouseout)="showText=false" >{{row?.domain}}</div>
                <div *ngIf="!showText"></div>
                <div *ngIf="showText && rowIndex === showedIndex">
                    {{row?.vp}}<br>
                    {{row?.cpu}}<br>
                    {{row?.vm}}<br>
                    {{row?.maxspeed}}</div>
            </ng-template>
        </ngx-datatable-column>