如何在 angular 8 懸停時顯示來自 json 的表列數據

Question

我正在使用 json 數據填充到表中。 這里我的 div 中的 td 是動態創建的。在這里，我只需要將“狀態”列的第一個值顯示到每行的第二個 td 中（現在顯示所有值）。 在第一個值懸停時，我需要在一個小跨度內顯示所有值。這是下面的代碼。 我也在此處創建了一個演示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
  }
}

應用程序組件.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>

Answer 1

我認為這就是您要尋找的內容：我將樣式放在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`
    }

}