binding - Some data is not displaying in an Angular project - Stack Overflow

admin管理员组

文章数量:1435534

 <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."

本文标签： bindingSome data is not displaying in an Angular projectStack Overflow