Я использую данные ngx, импортируя свои данные из json. Я добавил некоторые дополнительные сведения, которые будут отображаться в столбце «домен». Поэтому, наводя курсор на определенную ячейку «домена» столбца, я хочу получить более подробную информацию только об этой ячейке, но я получаю более подробную информацию обо всех ячейках этого конкретного столбца.
//HTML, который я использую
<ngx-datatable-column name = "App Domain" [flexGrow] = "2" >
<ng-template let-row = "row" ngx-datatable-cell-template>
<div (mouseover) = "showText=(true)" (mouseout) = "showText=(false)" >{{row?.domain}}</div>
<div *ngIf = "!showText"></div>
<div *ngIf = "showText">
{{row?.vp}}<br>
{{row?.cpu}}<br>
{{row?.vm}}<br>
{{row?.maxspeed}}</div>
</ng-template>
</ngx-datatable-column>
//Свойства с данными HTML в моем коде
<ngx-datatable class = "material full screen" class = "bootstrap" [rows] = "rows" [columnMode] = "'flex'" [headerHeight] = "50" [footerHeight] = "50" rowHeight = "auto">
//component.ts
export class DashboardComponent implements OnInit {
title = 'test-dashboard';
rows=[ ]
apiResponseData: any = [];
apiData = []
pingApiInterval = 300000;
showText: boolean;
constructor(private dashboardService: DashboardService) { this.showText = false; }
Пробовал разные подходы, но у меня не получилось.
Проблема в том, что вы используете одну и ту же переменную showText
для всех строк.
Для получения сведений о конкретной ячейке вы можете использовать переменную (showedIndex
) для хранения индекса зависшей строки, а затем проверить ее для отображения только его информации.
<ngx-datatable-column name = "App Domain" [flexGrow] = "2" >
<ng-template let-row = "row" let-rowIndex = "rowIndex" ngx-datatable-cell-template>
<div (mouseover) = "showedIndex = rowIndex; showText=true" (mouseout) = "showText=false" >{{row?.domain}}</div>
<div *ngIf = "!showText"></div>
<div *ngIf = "showText && rowIndex === showedIndex">
{{row?.vp}}<br>
{{row?.cpu}}<br>
{{row?.vm}}<br>
{{row?.maxspeed}}</div>
</ng-template>
</ngx-datatable-column>
Спасибо Антонио. Это сработало. Просто, если кто-то еще сталкивается с такой же проблемой, добавьте строку ниже в раздел класса экспорта файла componnent.ts показывал индекс: логическое значение | неопределенный;