时间戳

首页 > 解决方案 > 如何在角度 8 中悬停时显示来自 json 的表列数据

javascript - 如何在角度 8 中悬停时显示来自 json 的表列数据

问题描述

我正在使用 json 数据填充到表中。这里我在 td 中的 div 是动态创建的。这里我只需要在每行的第二个 td 中显示“status”列的第一个值（现在显示所有值）。在第一个值悬停时，我需要在一个小范围内显示所有值。这是下面的代码。我也在这里创建了一个演示https://stackblitz.com/edit/angular-o6epjq?file=src%2Fapp%2Fapp.component.ts

app.component.ts

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

app.component.html

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

标签： javascriptangulartypescript

解决方案

我认为这就是你要找的：我把风格放进app.component.html去基本上展示了它。您可以考虑为其配备一个单独的组件。

An 也做了一点重构。

样式工具提示的参考： https ://www.w3schools.com/css/css_tooltip.asp

app.component.html：

<style>
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }

    .tooltip .tooltip-content {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .tooltip-content {
        visibility: visible;
    }
</style>

<div>
    <table>
        <tr *ngFor="let x of statusdata1;">
            <td style="border:1px solid"><span>{{x.vehicle_number}}</span></td>
            <td style="border:1px solid">
                <div *ngIf="x.statusAvailable" class="tooltip">
                    {{x.statusUrls[0]}}
                    <span class="tooltip-content">
                        <span *ngFor="let status of x.statusUrls">
                            <img src="{{status}}" />
                        </span>
                    </span>
                </div>
            </td>
        </tr>
    </table>
</div>

app.component.ts

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

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

    ngOnInit() {
        /* First data */
        const jsonData = [{ "vehicle_number": 1, "status": "red,green" },
        { "vehicle_number": 2, "status": "yellow,red" }];

        this.statusdata1 = this.createCustom(jsonData);
    }

    createCustom(data) {
        return data.map(row => {
            const statusAvailable = typeof row.status === 'string';
            const statusUrls = statusAvailable
                ? row.status.split(',').map(s => this.generateUrl(s))
                : [];

            return {
                ...row,
                statusAvailable,
                primaryStatusUrl: statusAvailable ? statusUrls[0] : undefined,
                statusUrls
            }
        });
    }

    generateUrl(status) {
        return `/app/animate/${status}.png`
    }

}

推荐阅读