rendering 相关问题

{除可见 && ( {d... {divisVisible && ( <div className="absolute bg-[#ffffff] text-gray-700 w-[300px] h-auto py-3 px-3 rounded-lg mt-2 z-20 border-black border-2 border-solid "> {data && data.length > 0 ? ( data?.map((item: any) => { return ( <> <div className="py-2 cursor-pointer hover:bg-[#0000ffbe] hover:text-white hover:rounded-lg px-2" key={item._id}> <div onClick={() => { router.push(`/allproducts/${item._id}`); setInput(""); }}> {item.title} </div> {/* </Link> */} </div> </> ); }) ) : ( <> {" "} <div className="py-1 cursor-pointer px-2"> No result found... </div> </> )} </div> )} 我尝试向渲染的 div 添加键，但问题仍然存在。否则这是完美的工作。只是错误不断出现。列表的子元素是片段 (<> </>)，而不是 div。在您的代码中，该片段不是必需的，因此删除它应该可以解决错误，因为您已经在 <div key= ...> 中使用了键。如果需要片段，请参阅以下线程中的答案，以在反应中为片段设置密钥：我可以向 React 片段添加 key prop 吗？

javascript reactjs next.js rendering

回答 1 投票 0

有没有办法在 Windows 窗体中渲染 SVG？

我正在使用一个库，该库将其部分状态呈现为 SVG 文档。我想在 Windows 窗体或 WPF 环境中呈现它。目前有办法做到这一点吗？如果...

winforms svg rendering

回答 3 投票 0

在 Flutter 中实现 3D 可定制地球仪的最佳方式？

以下问题：我目前正在开发一个旅行应用程序，我想到了实现一个可由用户旋转的 3D 地球仪的想法。我认为地球仪是一个基本的白色球体，带有......

flutter 3d flutter-layout rendering flutter-animation

回答 1 投票 0

Pyrender 中的世界到像素转换

我正在尝试将使用pyrender渲染的3D世界中的点转换为像素坐标。世界到相机帧的转换似乎有效，但是相机到像素帧的转换是

python 3d computer-vision rendering pyrender

回答 1 投票 0

minecraft 使用什么库来实现 3D 图形？

我知道 Minecraft 使用 LWJGL 库，但这就是让它拥有 3D 图形的原因吗？

3d rendering lwjgl minecraft

回答 2 投票 0

在flutter中渲染对象的performlayout函数期间以编程方式创建小部件？

我正在尝试构建一个自定义版本的列（称为 CustomColumn），它可以延迟地布置子项，类似于 ListView 的功能，但可以更好地控制它们的放置方式...

flutter dart layout rendering

回答 1 投票 0

使用搜索字段搜索特定节目时出现重复且不相关的标题

我正在使用 Jikan API 创建某种动漫图库，我想要包含的功能之一是能够在图库中搜索特定的动漫标题。我的问题是机智...

javascript reactjs api duplicates rendering

回答 1 投票 0

使用主相机的深度缓冲区渲染另一个相机视图

主相机渲染后，我想使用（或复制）其深度缓冲区到（禁用的）相机的深度缓冲区。我的目标是将粒子绘制到较小的渲染目标上（使用单独的相机）...

graphics unity-game-engine rendering

回答 2 投票 0

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

angular binding rendering lazy-loading data-hiding

回答 1 投票 0

模糊事件在按键时触发

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

javascript events polymer rendering lit-html

回答 2 投票 0

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

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

c++ opengl rendering mesh depth-testing

回答 1 投票 0

在变换上舍入 CSS 子像素

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