lazy-loading 相关问题

某些数据未在 Angular 项目中显示

<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. 预期结果：我希望数据在页面加载时正确显示，而不需要调整大小或单击等操作。 采取的步骤： 数据是使用 Angular 服务通过 HTTP 请求获取的。 使用 *ngFor 将数据绑定到表。 控制台中没有出现错误，但有时初始渲染时数据会丢失。 如图所示，当我点击或执行任何操作（例如点击按钮或调整页面大小）时，我没有获取表格中的数据。但是，数据会在这些操作之后出现。问题是什么？azy 加载或分页： “该表使用带有分页的延迟加载来以较小的块显示数据。仅当用户与表交互（例如滚动或浏览页面）时才会提取数据。但是，数据在初始加载时无法正确显示，并且仅在执行某些操作（例如调整页面大小或单击按钮）后才会出现。” “由于我使用分页延迟加载，我怀疑问题可能与数据最初加载时的页面或表格刷新行为有关。直到用户手动触发操作（例如单击或调整页面大小）后，数据才会显示。窗户。” 用户交互后的数据获取逻辑： “我已经实现了在某些用户交互（例如，单击按钮或选择过滤器）后获取数据的逻辑。但是，表有时在用户执行这些操作之前不会显示数据，即使在用户执行这些操作时数据应该可用。页面加载。” “只有在用户交互（例如单击按钮或选择过滤器）后，才会通过 Angular 服务获取数据。因此，表最初可能为空或不显示预期的数据。我需要确保数据正确加载，即使无需用户交互。” 您能否为我提供更多代码，以便获得更好的想法。 根据您的描述和代码，该问题似乎与 PrimeNG 延迟加载表的更改检测和初始化计时有关。 // table.component.ts import { Component, OnInit, AfterViewInit, ChangeDetectorRef, ViewChild } from '@angular/core'; import { Table } from 'primeng/table'; import { finalize } from 'rxjs/operators'; interface Lead { id: string; leadId: string; businessName: string; businessEntity: string; contactPerson: string; city: string; sourcedBy: string; createdOn: Date; leadInternalStatus: string; } @Component({ selector: 'app-business-loan-table', templateUrl: './business-loan-table.component.html' }) export class BusinessLoanTableComponent implements OnInit, AfterViewInit { @ViewChild('leadsTable') leadsTable: Table; leads: Lead[] = []; totalLeadsCount: number = 0; loading: boolean = true; businessNameToSearch: string = ''; selectedLeadStatus: any; selectedSoucedByStatus: any; constructor( private leadsService: LeadsService, private cdr: ChangeDetectorRef ) {} ngOnInit() { // Initial setup this.initializeFilters(); } ngAfterViewInit() { // Trigger initial load after view initialization setTimeout(() => { this.loadLeads({ first: 0, rows: 10 }); }); } private initializeFilters() { // Initialize any default filter values this.selectedLeadStatus = null; this.selectedSoucedByStatus = null; this.businessNameToSearch = ''; } loadLeads(event: any) { this.loading = true; const filters = this.getFilters(); const pageIndex = event.first / event.rows; const pageSize = event.rows; this.leadsService.getLeads(pageIndex, pageSize, filters) .pipe( finalize(() => { this.loading = false; this.cdr.detectChanges(); }) ) .subscribe({ next: (response: any) => { this.leads = response.data; this.totalLeadsCount = response.total; // Ensure table state is updated if (this.leadsTable) { this.leadsTable.totalRecords = response.total; } }, error: (error) => { console.error('Error loading leads:', error); this.leads = []; this.totalLeadsCount = 0; } }); } private getFilters() { return { businessName: this.businessNameToSearch, leadStatus: this.selectedLeadStatus?.name, sourcedBy: this.selectedSoucedByStatus?.name }; } filterWithBusinessName() { if (this.leadsTable) { this.resetTableAndLoad(); } } statusChange(event: any) { this.resetTableAndLoad(); } inputValueChangeEvent(type: string, value: string) { // Handle input change events if needed if (type === 'loanId') { // Implement any specific handling } } applyConfigFilters(event: any, type: string) { this.resetTableAndLoad(); } private resetTableAndLoad() { if (this.leadsTable) { this.leadsTable.first = 0; this.loadLeads({ first: 0, rows: this.leadsTable.rows || 10 }); } } // Helper methods for the template getSourceName(sourcedBy: string): string { // Implement your source name logic return sourcedBy; } getStatusName(status: string): string { // Implement your status name logic return status; } getStatusColor(status: string): { textColor: string; backgroundColor: string } { // Implement your status color logic return { textColor: '#000000', backgroundColor: '#ffffff' }; } actionItems(lead: Lead): any[] { // Implement your action items logic return []; } viewLead(id: string) { // Implement view logic } updateLead(id: string) { // Implement update logic } }

反应路由器动态

我制作了一个带有动态菜单的应用程序。我也想要动态路线。 我使用工具板。 我的例子： 在configureRouters.js中 常量导航项 = [ { 标题：“”，图标：“”，elem...

为什么 swiftUI 列表不惰性（与lazyVStack相比）？

SwiftUI 中的列表真的很懒吗？ 我有一个从 coreData 获取的 5000 个元素的列表，我想将它们显示在列表中。我读了很多评论（比如：https://developer.apple.com/fo...

Angular 2 模块延迟加载不起作用

我试图通过构建一个包含两个部分的网站基本结构来了解 Angular 2 (RC5) 模块的延迟加载（想想登录页面和主网站）。我已经设置好了...

如何使用延迟加载和分页查询Primefaces dataTable的数据

在我的 JSF 数据表中，我实现了延迟加载，当我对记录进行分页时，执行下一组记录需要大约 4 或 5 秒的时间，实际上应该花费不到

Lazy chunk 失败：在 React 18.2.0 中恢复/重新加载失败的 split chunk，并使用延迟反应和悬念

我已将我的代码迁移到React 18.2.0中。我正在使用 使用悬念和惰性进行代码分割。 单页应用程序 分割块已完美加载，快乐流程正在工作。下面是代码 让

Dask，如何将变量中具有特定值的行放入惰性计算

我正在尝试学习使用 dask 来完成我的机器学习项目。 我的数据集太大，无法使用 Pandas，所以我必须保持延迟加载。 这里有一个小样本来展示它是如何设置的：...

如何使用 next/dynamic 动态加载 Nextjs 15 中的组件而不出现以下错误？

我正在尝试加载一个组件： '使用客户端'； 从“下一个/动态”导入{动态}； 从'react-dom'导入{useFormState}； 从'@/lib/actions'导入{postAction}； 导入

如何实现实体对象中内容字段的延迟初始化？

我有两个实体：用户和帖子（一对多关系）。帖子字段：id、创建日期、标题、内容、用户。 数据存储在数据库中并通过 Hibernate 访问。 我有一个控制器要通过

延迟加载音频和视频未加载

我已经尝试了一切，甚至是我的敌人（ChatGPT）。我不确定我做错了什么。音频和视频将无法加载。最糟糕的是，我描述视频的文字应该改变颜色，而且它......

Ionic 3 Lazy 模块中的条件路由页面

我在延迟加载 Ionic 3 应用程序“登录页面”、“视频页面”和“主页”中有 3 个不同的页面。 在我的视频页面中有一个复选框，上面写着：“在...

有什么办法可以用3个模型来加速像我这样的3个js站点吗？

我正在为我的学术项目建立一个网站 - 查看我的网站 - 但加载速度非常慢。你可以看到下面的图片 总阻塞时间 - 11,940 毫秒 我尝试压缩模型和 co...

如何更改 C# 中 Directory.EnumerateFiles 的惰性结果

我需要更改 C# 中 Directory.EnumerateFiles 的惰性结果 我尝试了下面的代码，但我失去了 Directory.EnumerateFiles 函数的懒惰行为。 公共任务 我需要更改 C# 中 Directory.EnumerateFiles 的惰性结果 我尝试了下面的代码，但我失去了 Directory.EnumerateFiles 函数的懒惰行为。 public Task<IEnumerable<string>> EnumerateStorageFiles(string DirectoryPathOnStorage, string SearchPattern = "*.*") { try { List<string> result = Directory.EnumerateFiles(GetStorageRelatedPath(DirectoryPathOnStorage), SearchPattern, new EnumerationOptions() { IgnoreInaccessible = true, RecurseSubdirectories = true, AttributesToSkip = FileAttributes.System, ReturnSpecialDirectories = false }).ToList(); for (int i = 0; i < result.Count; i++) { result[i] = Path.GetRelativePath(StorageBasePath, result[i]); } return Task.FromResult(result.AsEnumerable()); } catch { } return Task.FromResult(Enumerable.Empty<string>()); } public Task<IEnumerable<string>> EnumerateStorageFiles(string DirectoryPathOnStorage, string SearchPattern = "*.*") { try { // Using Select to transform paths lazily without converting to List IEnumerable<string> result = Directory.EnumerateFiles(GetStorageRelatedPath(DirectoryPathOnStorage), SearchPattern, new EnumerationOptions() { IgnoreInaccessible = true, RecurseSubdirectories = true, AttributesToSkip = FileAttributes.System, ReturnSpecialDirectories = false }) .Select(file => Path.GetRelativePath(StorageBasePath, file)); return Task.FromResult(result); } catch { return Task.FromResult(Enumerable.Empty<string>()); } } 您在代码中失去惰性行为的原因是由于 Directory.EnumerateFiles 上的 .ToList() 调用。当您调用 .ToList() 时，它会立即强制进行枚举，这意味着所有文件都会立即加载到内存中，从而违背了延迟计算的目的。 为了在转换结果时保持惰性求值，您可以避免转换为列表。 相反，您可以使用 LINQ 延迟应用转换，同时保留 IEnumerable 行为。

NestJS，Sequelize 延迟加载

知道 Sequelize 延迟加载在 NestJS 中是否有效吗？我还没有找到太多关于它的信息，而且它似乎不起作用。 进口 { 属于， 属于很多人， 柱子， 外键， 有很多， 型号...

LazyColumn 当选择将 url 传递给 AsyncImage 时重新组合

Jetpack 撰写的新手，有人可以解释为什么当我在 LazyRow 中选择一个项目并将该 url 传递给图像时，它会再次重新组合整行吗？我应该如何使用 movieSelector 变量...

当幻灯片位于视口中时加载图像 slick.js

我想实现以下结果：使用 slick.js，我想仅当指定的幻灯片位于视口中时才加载一些图像。我在控制台中看到，幻灯片收到以下标签

在浏览器网络中加载延迟组件时，Angular Deferrable Views 无法按预期工作

我正在尝试使用 @defer 装饰器来延迟加载名为 app-box- Five 的特定组件。下面是我的代码的屏幕截图： 在此输入图像描述 @defer（定时器（5s））{} 等了5秒后...

延迟加载可以被视为 RAII 的一个例子吗？

在 iOS 上独占 Objective-C 几年之后，我最近一直在追赶我的 C++，而“新风格”C++ 中出现最多的主题是 RAII 确保我理解 RAII 概念

如果浏览器缓存了项目的bundle文件，为什么我们要使用延迟加载？

我知道浏览器缓存可以存储捆绑文件以便更快地检索，因此一旦用户访问了该网站，后续访问应该加载缓存的文件而不是再次下载它们...

如何在NestJS中延迟解析模块？

我正在阅读有关延迟加载的 NestJS 文档 我正在尝试在无服务器环境中使用 Nestjs 之外的 Nestjs 模块。文档引用人们这样做。 下面的代码