Angular中ngx datatable鼠标悬停单元格仅显示当前行详情问题

问题根源 #

你当前使用组件全局变量showText控制所有行的详情显示，所有行的详情模块都绑定同一个变量，导致鼠标悬停任意一行时，所有行的showText都会被设为true，进而显示所有行的详情。

方案一：为每行添加独立状态（推荐） #

这种方式给每一行数据添加专属的显示状态，确保仅当前悬停的行触发详情显示。

1. 修改组件TS代码

在获取数据后，为每行添加showDetails属性并默认设为false：

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

  ngOnInit(): void {
    // 假设你通过服务获取数据，这里处理数据时添加状态属性
    this.dashboardService.getData().subscribe(data => {
      // 为每行添加独立的showDetails状态
      this.rows = data.map(row => ({ ...row, showDetails: false }));
    });
  }
}

2. 修改HTML模板

将全局变量替换为当前行的showDetails属性，仅控制当前行的详情显示：

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

方案二：维护当前悬停行的唯一标识 #

如果不想修改原始数据结构，可以通过记录当前悬停行的唯一ID来控制详情显示。

1. 修改组件TS代码

替换全局变量showText为hoveredRowId，用于存储当前悬停行的唯一标识：

export class DashboardComponent implements OnInit {
  title = 'test-dashboard';
  rows = [];
  apiResponseData: any = [];
  apiData = [];
  pingApiInterval = 300000; 
  hoveredRowId: any = null; // 存储当前悬停行的唯一ID
  
  constructor(private dashboardService: DashboardService) { }
}

2. 修改HTML模板

通过行的唯一ID匹配，仅显示当前悬停行的详情（假设行数据有id字段，若没有可替换为domain等唯一字段）：

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

内容的提问来源于stack exchange，提问作者Aizaz Ul Haq Sultanpori