Javascript 如何在angular 8中显示悬停时来自json的表列数据

我使用json数据填充到表中。这里是动态创建的td中的div。这里我只需要在每行的第二个td中显示“status”列的第一个值（现在显示所有值）。在第一个值悬停时，我需要显示小范围内的所有值。我也在这里创建了一个演示

app.component.ts

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
影像来源：任何；
statusdata1：任何；
构造函数（）{}
恩戈尼尼特（）{
/*第一数据*/
this.statusdata1=[{“车辆编号”：1，“状态”：“红色，绿色”}，{“车辆编号”：2，“状态”：“黄色，红色”}]；
console.log（this.statusdata1）；
}
获取处理（数据）{
设str=''
设arr=data.split（'，'）；
如果（arr.length>0）{
for（设i=0；i

app.component.html

开始编辑以查看发生的奇迹：）

{x.车辆号}

我想这就是你想要的： 我把这个样式放在app.component.html中进行了基本的演示。你可以考虑有一个单独的组件。

a还进行了一些重构

样式化工具提示的参考：

app.component.html：

.工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
}
.工具提示.工具提示内容{
可见性：隐藏；
宽度：120px；
背景色：黑色；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：5px0；
/*定位工具提示*/
位置：绝对位置；
z指数：1；
}
.工具提示：悬停。工具提示内容{
能见度：可见；
}
{x.车辆号}
{{x.statusUrls[0]}

app.component.ts

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
影像来源：任何；
statusdata1：任何；
海关数据：任何；
恩戈尼尼特（）{
/*第一数据*/
const jsonData=[{“车辆编号”：1，“状态”：“红色，绿色”}，
{“车辆编号”：2，“状态”：“黄色，红色”}]；
this.statusdata1=this.createCustom（jsonData）；
}
创建自定义（数据）{
返回data.map（行=>{
const statusAvailable=行的类型。status=='string'；
const statusUrls=statusAvailable
？row.status.split（“，”）.map（s=>this.generateUrl）
: [];
返回{
一行
状态可用，
primaryStatusUrl:statusAvailable？statusUrls[0]：未定义，
状态URL
}
});
}
发电机（状态）{
返回`/app/animate/${status}.png`
}
}

您的意思是要在popover上显示其他状态？？是的，最初它将显示第一个状态。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 imageSource :any;
statusdata1: any;

constructor() {}

  ngOnInit() {
    /* First data */
    this.statusdata1 = [{"vehicle_number":1,"status":"red,green"},{"vehicle_number":2,"status":"yellow,red"}];
    console.log(this.statusdata1);
  }
  getTreatment(data) {
    let str = '<div class="demooutput">'
    let arr = data.split(',');
    if (arr.length > 0) {
      for (let i = 0; i < arr.length; i++) {
        str += '<span class="' + arr[i] + '"><img src="/app/animate/' + arr[i] +  '.png"/></span>'
      }
    }
    str += '</div>'
    return str
  }
}

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<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 [innerHtml]="getTreatment(x.status)"></span></td>
        </tr>
</table>
</div>