在angular中鼠标悬停在ngx datatable中获取任何特定单元格的详细信息有问题

Question

我使用ngx数据表，从json导入我的数据。我已经添加了一些更多的细节显示在列"域"。因此，当悬停到列'domain'的特定单元格时，我只想获得有关该单元格的更多详细信息，但我正在获得该特定列的所有单元格的更多详细信息。

//我正在使用的HTML

<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数据表属性

<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; }

尝试了各种方法，但都失败了。

Answer 1

问题是您对所有行使用相同的变量showText。

要获取特定单元格的详细信息，您可以使用一个变量(showedIndex)来存储悬停行的索引，然后检查它是否只显示该行的信息。

<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>