Some data is not displaying in an Angular project

<div *ngIf="activeItem.name == 'businessLoan'">
<div class="text-capitalize">
<p-table
#leadsTable
[value]="leads"
[sortOrder]="-1"
[lazy]="true"
(onLazyLoad)="loadLeads($event)"
dataKey="id"
[showCurrentPageReport]="true"
[rowsPerPageOptions]="[10, 25, 50]"
[paginator]="true"
[rows]="10"
class="p-datatable-striped"
[totalRecords]="totalLeadsCount"
[loading]="loading"
responsiveLayout="scroll"
scrollHeight="flex"
[globalFilterFields]="[
'referenceNo',
'customer.firstName',
'partner.partnerName',
'status'
]"
styleClass="p-datatable-customers p-datatable-gridlines"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} leads"
>
<ng-template pTemplate="caption">
<div class="row">
<div class="col-md-4 mt-2 no-padding-small">
<div class="p-inputgroup">
<input
type="text"
pInputText
placeholder="Search Lead with Business Name"
[(ngModel)]="businessNameToSearch"
(ngModelChange)="
inputValueChangeEvent('loanId', businessNameToSearch)
"
(keyup.enter)="filterWithBusinessName()"
/>
<button
type="button"
pButton
icon="pi pi-search"
class="p-button-primary"
[disabled]="!businessNameToSearch"
(click)="filterWithBusinessName()"
></button>
</div>
</div>
<div class="col-md-4 mt-2 no-padding-small">
<div
class="p-inputgroup"
*ngIf="
userDetails &&
userDetails.userType &&
userDetails.userType != '3'
"
>
<br class="d-lg-none d-md-none" />
<p-dropdown
styleClass="text-left"
[style]="{ width: '100%' }"
[options]="leadUsers"
(onChange)="statusChange($event)"
[dropdownIcon]="'fa fa-caret-down'"
[(ngModel)]="selectedSoucedByStatus"
optionLabel="name"
dataKey="name"
[filter]="true"
filterPlaceholder="Search..."
>
</p-dropdown>
</div>
</div>
<div class="col-md-4 mt-2 no-padding-small text-right">
<div class="d-flex">
<div class="flex-grow-1 me-2">
<p-dropdown
styleClass="text-left"
[style]="{ width: '100%' }"
[options]="leadStatus"
(onChange)="statusChange($event)"
[dropdownIcon]="'fa fa-caret-down'"
[(ngModel)]="selectedLeadStatus"
optionLabel="displayName"
dataKey="name"
>
</p-dropdown>
</div>
<div class="d-flex align-items-center pointer-cursor">
<app-filter
[position]="'right'"
[iconColor]="'#33009C'"
[iconSize]="'28px!important'"
(filterEvent)="applyConfigFilters($event, '')"
[filterConfig]="filterConfig"
[showFilterIndication]="appliedFilter"
>
</app-filter>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th>Lead Id</th>
<th>Business Name</th>
<th>Business Entity</th>
<th>Contact Person</th>
<th>City</th>
<th
*ngIf="
userDetails &&
userDetails.userType &&
userDetails.userType != '3'
"
>
Sourced By
</th>
<th>Created Date</th>
<th>Status</th>
<th>Actions</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-lead>
<tr>
<td>
<span class="table-column-data" *ngIf="lead.leadId">{{
lead.id
}}</span>
</td>
<td>
<b>
<span class="table-column-data" *ngIf="lead.businessName">{{
lead.businessName | capitalizeFirst
}}</span>
</b>
</td>
<td>
<span class="table-column-data" *ngIf="lead.businessEntity">{{
lead.businessEntity
}}</span>
</td>
<td>
<span class="table-column-data" *ngIf="lead.contactPerson">{{
lead.contactPerson | capitalizeFirst
}}</span>
</td>
<td>
<span class="table-column-data" *ngIf="lead.city">{{
lead.city | capitalizeFirst
}}</span>
</td>
<td
*ngIf="
userDetails &&
userDetails.userType &&
userDetails.userType != '3'
"
>
<span class="table-column-data" *ngIf="lead.sourcedBy">{{
getSourceName(lead.sourcedBy) | capitalizeFirst
}}</span>
</td>
<td>
<span class="table-column-data" *ngIf="lead.createdOn">{{
lead.createdOn | date : "mediumDate"
}}</span>
</td>
<td>
<span
class="table-column-data fw-bold statusdata"
*ngIf="lead.leadInternalStatus"
[ngStyle]="{
color: getStatusColor(
getStatusName(lead.leadInternalStatus)
).textColor,
'background-color': getStatusColor(
getStatusName(lead.leadInternalStatus)
).backgroundColor
}"
>
{{ getStatusName(lead.leadInternalStatus) }}
</span>
</td>
<td>
<div class="text-center">
<div class="d-flex">
<button
pButton
pRipple
type="button"
class="p-button-primary me-2 custom-btn"
(click)="viewLead(lead.id)"
>
View
</button>
<button
pButton
pRipple
type="button"
class="p-button-info me-2 custom-btn"
(click)="updateLead(lead.id)"
>
Update
</button>
<p-menu
appendTo="body"
#menu
[model]="actionItems(lead)"
[popup]="true"
></p-menu>
<button
pButton
type="button"
class="custom-btn"
(click)="menu.toggle($event)"
icon="pi pi-bars"
></button>
</div>
</div>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr class="text-center">
<td colspan="10" class="text-center fw-bold">
<img
src="../../../assets/images/menu/no-data.gif"
width="200"
height="200"
/>
<p>No Leads Found</p>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>primeng table Issue: Some data is not displaying in my Angular project. The data seems to be missing when the page loads, but after performing actions like clicking buttons or resizing the page, the data reappears.


Expected Result: I expect the data to display properly on page load, without requiring actions like resizing or clicking.

Steps Taken:

The data is fetched via an HTTP request using Angular services. The data is bound to a table using *ngFor. No errors appear in the console, but sometimes the data is missing on initial render.

As shown in the figure, I am not getting the data in the table when I click or perform any operations, such as clicking on a button or resizing the page. However, the data appears after these actions. What is the issue?azy Loading or Pagination:

"The table is using lazy loading with pagination to display the data in smaller chunks. The data fetches only when the user interacts with the table, such as scrolling or navigating through pages. However, the data fails to display correctly on the initial load, and only appears after performing certain actions like resizing the page or clicking a button." "Since I am using lazy loading with pagination, I suspect the issue might be related to the page or table refresh behavior when the data is initially loaded. The data does not appear until the user manually triggers an action, such as clicking or resizing the window." Data Fetching Logic After User Interaction:

"I have implemented logic to fetch data after certain user interactions (e.g., clicking a button or selecting a filter). However, the table sometimes does not display data until the user performs these actions, even though the data should be available when the page loads." "The data is fetched via an Angular service only after a user interaction like clicking a button or selecting a filter. As a result, the table may initially be empty or not display the expected data. I need to ensure that the data loads correctly even without user interaction."

Continue reading...