Событие, когда элемент был загружен в DOM

Используя Angular, я создал таблицу, в которой отображаются данные. Данные поступают из CSV-файла, который анализируется библиотекой Papa Parse. Мои данные почти сразу доступны в консоли, но для отображения в таблице требуется около 10 секунд. Вот код таблицы:

<div class = "table-responsive" *ngIf = "searchData?.length" style = "padding-bottom: 10px;">
  <table class = "table table-striped table-sm">
    <thead>
      <tr>
        <th *ngFor = "let header of headers">{{header}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor = "let record of searchData; let i = index">
        <ng-container *ngIf = "((i && !searchOn) || searchOn) && record.length > 1">
          <td *ngFor = "let index of indexes; let x = index">
            <a *ngIf = "x == 3" href = "{{record[index]}}" target = "_blank">{{record[index]}}</a>
            <ng-container *ngIf = "x != 3">{{record[index]}}</ng-container>
          </td>
        </ng-container>
      </tr>
    </tbody>
  </table>
</div>

Я хочу отображать счетчик загрузки, пока таблица загружается, но мне нужно будет прослушивать, когда данные загружаются в DOM. Как я могу это сделать?

Поведение ключевого слова "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
1
42
1

Ответы 1

У вас уже есть *ngIf = "searchData?.length", так что это будет работать, когда данные будут загружены. Теперь вам нужно показывать счетчик только при загрузке данных... Просто добавьте еще одно условие if, если оно есть not:

<div *ngIf = "!searchData?.length">Loading...</div>

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