如何在 angular 8 中的表格中显示特定列的鼠标 hover 的特定数据

Question

I have a simple json. I need to show specific related span/vehicle_name on mouse hover of specific 'status'. Now when I hover on status(red or yellow) on my table column both vehicle_name is showing.Here I want to show only specific vehicle_name on mouse hover of specific status. Here is the code below Demo: https://stackblitz.com/edit/angular-d8cwtw?file=src%2Fapp%2Fapp.component.ts

home.component.html

<div>
<table>
<tr *ngFor="let x of statusdata1;">
            <td style="border:1px solid"><span>{{x.vehicle_number}}</span></td>
            <td style="border:1px solid"><span (mouseover)="show()" (mouseout)="hide()">{{x.status}}</span><span *ngIf="showit">{{x.vehicle_name}}</span></td>
        </tr>
</table>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {
imageSource :any;
statusdata1: any;
showit:boolean = false;
constructor() {}

  ngOnInit() {
    /* First data */
    this.statusdata1 = [{"vehicle_number":1,"vehicle_name":"car","status":"yellow"},{"vehicle_number":2,"vehicle_name":"bus","status":"red"}];
    console.log(this.statusdata1);
  }
  show(){
    this.showit= true; 
  }
  hide(){
      this.showit= false; 
  }
}

Answer 1

Good day!

1. To be honest, I can suggest to you is just move this logic to separate dummy component, with such template:

<span (mouseover)="show()" (mouseout)="hide()">{{x.status}}</span>
<span *ngIf="showIt">{{x.vehicle_name}}</span>

So, in this case you showIt boolean will be bonded to particular component and you needn't do some extra logic.

2. If you don't wont to do it, I think you should have additional variable (index of table row on which mouseover event triggers) and inner your template you should have such condition:

<tr *ngFor="let x of statusdata1; index as idx">
  <td style="border:1px solid"><span>{{x.vehicle_number}}</span></td>
  <td style="border:1px solid">
    <span (mouseover)="show(idx)" (mouseout)="hide(idx)">{{x.status}}</span>
    <span *ngIf="showit && idx === currentIdx">{{x.vehicle_name}}</span>
  </td>
</tr>

3. Also I can suggest to you the clearest and performant solution from my option - use data-content attribute, check it out: https://davidwalsh.name/css-content-attr

.html

<table>
  <tr *ngFor="let x of statusdata1">
    <td>
      <span>{{ x.vehicle_number }}</span>
    </td>
    <td>
      <span class="status" [attr.data-line]="x.vehicle_name">
        {{ x.status }}
      </span>
    </td>
  </tr>
</table>

.css

td {
  border: 1px solid;
}

span[data-line]:hover:after { 
    content: attr(data-line);
}

Demo: https://stackblitz.com/edit/angular-qowzj3