rendering 相关问题

某些数据未在 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 } }

模糊事件在按键时触发

我需要在按下回车键和模糊事件时获取输入值。所以我创建了两个函数： 处理模糊前夕...

渲染选定网格面的正射投影时，OpenGL 深度测试不起作用

我正在尝试在 OpenGL 中渲染选定网格面的正交投影。网格有一个洞，我只想显示从观察者的角度可见的面。然而，有...

在变换上舍入 CSS 子像素

所以，这个问题以前曾出现过，如下所示：翻译 + 画布 = 模糊文本 这里：CSS 翻译后是否可以“捕捉到像素”？ 好像还没有什么结论...

通过异步 API 调用加载数据后，如何渲染数据并初始化此数据的 UI 事件处理？

我在名为 data.json 的文件中有一些嵌套的 Json。我正在使用 fetch 读取文件，然后希望根据用户是否在下拉列表中选择了特定选项来进行一些过滤...

Lwjgl / Opengl 字体渲染

我正在尝试使用 opengl 在 lwjgl 显示器上显示带有自定义字体的文本。目前我正在使用我的自定义位图字体类从 png 文件加载字体，并将它们显示在同一个 f...

Three.js 颜色更改不会在 instanceColor 设置上恢复

我目前正在开发一个具有一些自定义属性的加载 ifc 模型。我有一个搜索字段，我的目标是我的应用程序的用户可以在字段中输入自定义指示符...

如何控制 React 应用程序中由 StrictMode 引起的双重渲染？

我有一个简单的 React 应用程序，其中 index.js 文件如下所示： 从“反应”导入反应； 从'react-dom/client'导入ReactDOM； 导入'./index.css'; 从“./App”导入应用程序； 常量

使用 Python 的 Matplotlib 库在颜色条图标题中进行 LaTeX 渲染的问题

我在使用 Python 的 Matplotlib 库的以下颜色条图的标题上遇到问题。有两个次要情节。第一个标题效果很好，即LaTeX渲染完成了

Web 组件自定义 parsedCallback 方法不起作用

重要提示：几乎所有 IDE 都会自动延迟 javascript 的执行，这意味着您可能无法使用它们来重现此问题 在

数据文档中的远大期望状态标记不可见

我在《远大前程》的数据文档中看不到“红色”或“绿色”状态成功/失败标记，这可能是什么原因？即使是以前可见的旧的，现在......

React 如何只更新 DOM 中需要更新的部分？

React 如何能够仅更新 DOM 中需要更新的部分（因为它们已更改），而不是重新渲染整个 DOM？ 据我了解，常规 HTML/Javascript 网络...

如何使用 python api 更改搅拌机上的环境纹理？

我想在搅拌机 2.8 上更改我的世界环境纹理。我必须多次执行此操作，因此我想使用 Python API 来节省时间。我正在使用节点，但我不确定如何分配...

如何禁用Nextjs预渲染页面？

如何才能真正实现 NextJs 应用程序中的 CSR（客户端渲染）某些页面？ 文档说，页面中存在 getServerSideProps 或 getStaticSiteProps 会使其预先

使用 URP 自定义着色器

我正在为网格使用自定义着色器，这基本上是其他网格的“视线阻挡器”。 您看不到网格本身，并且它后面的所有其他网格都被它遮挡。 现在我升级了...

当 api 提供值时，react-hook-form 的 useFieldArray 不渲染

我正在使用 fieldArray 来使用 React-hook-form 构建表单。此表单用于创建和更新用户，我还使用react-hook-form 中的“values”属性。现场使用...

多出一个像素，宽度为100%

我得到了一个 680 像素宽的文本区域。 这需要变得流畅，所以我使用百分比。 百分比形成完美的 100% 宽度，但似乎比应有的多渲染了 1 个像素。 http://jsfiddl...

有没有免费的方法可以使用.net将html页面转换为图像

我想获取html，包括文本和图像，并将其转换为包含所有内容的一张图像。 有免费的方法吗？ 这是使用 .net 3.5。 参见： 服务器生成的网页截图？

需要帮助了解左上角光栅化规则

我需要帮助来理解左上角光栅化规则。听起来很简单，但我很难理解某些示例案例。 为什么一个三角形的角像素被填充，而另一个三角形却没有？ (

EditForm .net 8 绑定值在登录页面中不起作用

这是我的app.razor： <p>这是我的应用程序。剃刀：</p> <pre><code>&lt;body&gt; &lt;Routes @rendermode=&#34;RenderModeForPage&#34; /&gt; &lt;script src=&#34;_framework/blazor.web.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;_content/MudBlazor/MudBlazor.min.js&#34;&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; @code { [CascadingParameter] private HttpContext HttpContext { get; set; } = default!; private IComponentRenderMode? RenderModeForPage =&gt; HttpContext.Request.Path.StartsWithSegments(&#34;/Account&#34;) ? null : InteractiveServer; } </code></pre> <p>这是我的登录页面：</p> <pre><code>@page &#34;/Account/Login&#34; @inject SignInManager&lt;ApplicationUser&gt; SignInManager @inject ILogger&lt;Login&gt; Logger @inject NavigationManager NavigationManager &lt;PageTitle&gt;Se connecter&lt;/PageTitle&gt; &lt;h1&gt;Se connecter&lt;/h1&gt; @if (errorMessage != null) { &lt;MudAlert Severity=&#34;Severity.Error&#34;&gt;@errorMessage&lt;/MudAlert&gt; } &lt;MudContainer MaxWidth=&#34;MaxWidth.Small&#34;&gt; &lt;MudCard&gt; &lt;EditForm Model=&#34;Input&#34; OnValidSubmit=&#34;LogInUser&#34; FormName=&#34;SignInUserForm&#34;&gt; &lt;MudCardContent&gt; &lt;MudTextField @bind-Value=&#34;Input.Email&#34; For=&#34;@(() =&gt; Input.Email)&#34; Immediate=&#34;true&#34; Label=&#34;Courriel&#34; /&gt; &lt;MudTextField @bind-Value=&#34;Input.Password&#34; For=&#34;@(() =&gt; Input.Password)&#34; Immediate=&#34;true&#34; Label=&#34;Mot de passe&#34; InputType=&#34;InputType.Password&#34; /&gt; &lt;/MudCardContent&gt; &lt;MudCardActions&gt; @if (InProgress) { &lt;MudProgressCircular Color=&#34;Color.Primary&#34; Indeterminate=&#34;true&#34; Class=&#34;ml-auto&#34; /&gt; } else { &lt;MudButton Variant=&#34;Variant.Filled&#34; Color=&#34;Color.Primary&#34; Class=&#34;ml-auto&#34; ButtonType=&#34;ButtonType.Submit&#34;&gt;Se connecter&lt;/MudButton&gt; } &lt;/MudCardActions&gt; &lt;/EditForm&gt; &lt;/MudCard&gt; &lt;/MudContainer&gt; @code { private string? errorMessage = null; private bool InProgress = false; [CascadingParameter] private HttpContext HttpContext { get; set; } = default!; private InputModel Input { get; set; } = new(); protected override async Task OnInitializedAsync() { if (HttpMethods.IsGet(HttpContext.Request.Method)) { // Clear the existing external cookie to ensure a clean login process await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme); } } public async Task LogInUser() { InProgress = true; // This doesn&#39;t count login failures towards account lockout // To enable password failures to trigger account lockout, set lockoutOnFailure: true var result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, true, lockoutOnFailure: true); if (result.Succeeded) { Logger.LogInformation(&#34;L&#39;utilisateur est connecté.&#34;); NavigationManager.NavigateTo(&#34;/Home&#34;); } else if (result.IsLockedOut) { Logger.LogWarning(&#34;Le compte a été bloqué.&#34;); errorMessage = &#34;Le compte a été bloqué.&#34;; } else { errorMessage = &#34;Erreur: tentative de connexion invalide.&#34;; } InProgress = false; } private sealed class InputModel { [Required(ErrorMessage = &#34;Le courriel ne doit pas être vide.&#34;)] [EmailAddress(ErrorMessage = &#34;Ceci n&#39;est pas une adresse courriel valide.&#34;)] public string Email { get; set; } = &#34;&#34;; [Required(ErrorMessage = &#34;Le mot de passe ne doit pas être vide.&#34;)] [DataType(DataType.Password)] public string Password { get; set; } = &#34;&#34;; } } </code></pre> <p>因此，当我填充该字段时，输入模型仍然为空字符串。我无法使用交互模式进行渲染，因为 HttpContext 那时不起作用。你知道我能做什么吗？</p> <p>那么也许有一个我不知道的渲染模式或者我错过了一些要写的东西？</p> </question> <answer tick="false" vote="0"> <p>编辑如下：</p> <pre><code>private IComponentRenderMode? RenderModeForPage =&gt; HttpContext.Request.Path.StartsWithSegments(&#34;/Account/Login&#34;) ? null : InteractiveServer; </code></pre> </answer> </body></html>