Проблема с получением сведений о любой конкретной ячейке при наведении курсора мыши в ngx datatable в angular

Я использую данные 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; }

Пробовал разные подходы, но у меня не получилось.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
75
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что вы используете одну и ту же переменную 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 показывал индекс: логическое значение | неопределенный;

Aizaz Ul Haq Sultanpori 24.11.2022 05:01

Другие вопросы по теме