primeng 相关问题

为什么不使用 PrimeNG 主题 css 变量？

我注意到顺风提供的主题有些奇怪，如果你查看位于“primeng/resources/themes/*/theme.css”中的任何主题，你会注意到在以下位置创建的所有 css 变量：...

在运行时使用指令动态替换新的 PrimeNG 复选框图标

我正在寻找一种解决方法来替换新的复选框检查图标，因为 Angular + primeng 更新了已更改的图标，但我想使用它的旧版本。 请找到一个最小的复制...

primeng 表内的下拉菜单

我在 primeng Turbo 表中使用下拉列表。我有一个由两个数组组成的数组，它们形成下拉菜单的选项。我希望第一个选项出现在第一行......

如何使用 PrimeNG、PrimeFlex 和 h-screen 在没有滚动条的情况下实现完整视口高度？

我正在使用 Angular 以及 PrimeNG 和 PrimeFlex 构建一个界面。我想要一个容器填充屏幕的整个高度，而不出现任何滚动条。我尝试过同时使用 h 屏幕...

我如何从PrimeNG表中获取当前页面索引

我使用 PrimeNg 库和启用分页器的 Table 组件。 Django 后端应用程序使用 PageNumberPagination。如何从该组件获取当前页码？ 我使用 PrimeNg 库和启用了分页器的 Table 组件。 Django 后端应用程序使用 PageNumberPagination。如何从该组件获取当前页码？ <p-table [value]="rows" [paginator]="true" [rows]="10" ></p-table> @Component({ selector: 'app-table', templateUrl: 'table.html', standalone: true, imports: [TableModule, CommonModule], providers: [ApiService] }) export class TablePaginatorBasicDemo { rows!: Row[]; constructor(private apiService: ApiService) {} ngOnInit() { this.apiService.getRows().pipe(tap((rows) => ({this.rows = rows}))).subscribe(); } } 你可以试试这个： 组件.ts： readonly ROWS_PER_PAGE = 5; currentPage = 0; updateCurrentPage(first: number): void { this.currentPage = first / this.ROWS_PER_PAGE; console.log('current page changed to: ', this.currentPage + 1); } component.template.html: <p-table responsiveLayout="scroll" [value]="products" [paginator]="true" [rows]="ROWS_PER_PAGE" (firstChange)="updateCurrentPage($event)" > 堆栈闪电战

通过@ViewChildern通过自定义属性选择html元素后无法调用Primeng方法的方法

我正在使用 Angular 框架 Primeng p-carousel 来显示一些词汇卡。在词汇卡上，我使用 p-inplace 隐藏一些信息，在用户尝试解决问题之前，那些

我们如何在 Prime 中使用 SVG 图标？

我们需要使用 FontAwesome Pro SVG（以及其他 SVG 图标）。但是，某些 UI 元素是在代码中构建的，而不是在模板中构建的。我们的开发人员告诉我，这是不可能的...

PrimeNG p-inputnumber 无法输入负小数

我需要使用 PrimeNG 的 p-inputnumber 组件捕获负小数，但是当输入组件时，minFractionDigits > 0，输入 - 会将光标跳到显示的末尾...

在我的路由中创建动态路径 - Angular / PrimeNg 版本

我需要在路由中动态创建多个路径，因为这些值将通过端点添加到侧边栏。 通过为侧边栏创建一个新项目，用户将指定...

如何在p-dropdown的Onchange事件中获取两个属性

下面我有苹果的p-下拉菜单。我想使用 onchange 获取 apple id 和 apple desc，我只能将 apple id 视为 Onchange 苹果事件中的值。我可以同时获得 apple id 和 apple desc

如何覆盖 PrimeNG p-divider 颜色

问题是如何在 Angular 中覆盖 primeng 的 p-divider 的颜色。使用版本 17。 这是 PrimeNG 中 p-divider 组件的源代码链接 https://github.com/primefaces/primeng/tree/

使 p-panel 延伸到其父级的空间

我正在使用 Angular (18.0.0) 和 PrimeNG (17.18)。 我正在水平对齐 p 面板，然后换行到下一行。 我希望每个 p 面板都使用其父面板的全部空间。 不幸的是...

TabView 中的 PrimeNG VirtualScroller 无法正常工作

我的 Angular 7 应用程序中有一个 VirtualScroller，遗憾的是启动时它没有渲染所有项目。 这是它的代码： 我的 Angular 7 应用程序中有一个 VirtualScroller，遗憾的是启动时它没有渲染所有项目。 这是它的代码： <p-virtualScroller [value]="financialItems" scrollHeight="400px" [itemSize]="150"> <p-header> <div class="ui-g"> <div class="ui-g-12 title-container"> Title </div> </div> </p-header> <ng-template let-psp pTemplate="item"> <div class="ui-g psp-item"> <div class="ui-g-12 ui-md-1"> <div style="font-size: 16px; text-align: left; margin-top: 15px;">Number:</div> <div style="font-size: 16px; text-align: left; margin-top: 15px;">Number:</div> <div style="font-size: 16px; text-align: left; margin-top: 15px;">Hint:</div> </div> <div class="ui-g-12 ui-md-3"> <div style="font-size: 16px; text-align: left; font-weight: bold; margin-top: 15px;">{{ psp.orderNumber }}</div> <div style="font-size: 16px; text-align: left; margin-top: 15px; font-weight: bold;">{{ psp.pspNumber }}</div> <div style="font-size: 16px; text-align: left; margin-top: 15px; font-weight: bold;">{{ psp.hint }}</div> </div> <div class="ui-g-12 ui-md-3"> <div class="ui-g"> <div class="ui-g-3 ui-sm-6">Dauer: </div> <div class="ui-g-8 ui-sm-6">{{psp?.startDate.toLocaleString('de-DE', { year: 'numeric', month: 'numeric', day: 'numeric' })}} - {{psp?.endDate.toLocaleString('de-DE', { year: 'numeric', month: 'numeric', day: 'numeric' })}}</div> <div class="ui-g-3 ui-sm-6">TCV: </div> <div class="ui-g-8 ui-sm-6">{{psp?.planRevenue | number:'1.2-2':'de'}}</div> <div class="ui-g-3 ui-sm-6">Kosten: </div> <div class="ui-g-8 ui-sm-6">{{psp?.planCosts | number:'1.2-2':'de'}}</div> <div class="ui-g-3 ui-sm-6">Stunden: </div> <div class="ui-g-8 ui-sm-6">{{psp?.totalHours | number:'1.2-2':'de'}}</div> </div> </div> <div class="ui-g-12 ui-md-3"> <div class="ui-g"> <div class="ui-g-6 ui-sm-6">Eigenumsatz: </div> <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.planOwnRevenue | number:'1.2-2':'de'}}</div> <div class="ui-g-6 ui-sm-6">Nichteigener Umsatz: </div> <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.planOtherRevenue | number:'1.2-2':'de'}}</div> <div class="ui-g-6 ui-sm-6">DB1-Kosten: </div> <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.costDB1 | number:'1.2-2':'de'}}</div> <div class="ui-g-6 ui-sm-6">DB2-Kosten: </div> <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.costDB2 | number:'1.2-2':'de'}}</div> </div> </div> <div class="ui-g-12 ui-md-2"> <div class="ui-g center-div"> <div class="ui-g-6 ui-sm-6">Gewährleistung: </div> <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.planWarranty | number:'1.2-2':'de'}}</div> <div class="ui-g-6 ui-sm-6">Risiko: </div> <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.planRisk | number:'1.2-2':'de'}}</div> </div> </div> </div> </ng-template> </p-virtualScroller> 这在tabView内部被称为： <p-tabView class="main-tab-view" [style]="{'heigth':'100%'}"> <p-tabPanel header="TestVS"> <app-virtual-scroller></app-virtual-scroller> </p-tabPanel> </p-tabView> 我的组件： private financialItems: FinancialItem[] = []; ngOnInit() { this.initTestData(); } initTestData() { this.financialItems.push(new FinancialItem("Nr.1", new Date("2018-12-01"), new Date("2018-12-31"), 10.00, "Ein Hinweis", 'Test', "12345678", 180, 13500, 10, 170, 5940, 1000, 6940, 0.0, 0.0, 0.0, 13500)); this.financialItems.push(new FinancialItem("Nr.2", new Date("2018-12-01"), new Date("2018-12-31"), 10.00, "Ein Hinweis", 'Test', "12345678", 180, 13500, 10, 170, 5940, 1000, 6940, 0.0, 0.0, 0.0, 13500)); this.financialItems.push(new FinancialItem("Nr.3", new Date("2018-12-01"), new Date("2018-12-31"), 10.00, "Ein Hinweis", 'Test', "12345678", 180, 13500, 10, 170, 5940, 1000, 6940, 0.0, 0.0, 0.0, 13500)); } 现在执行代码并打开选项卡时，我看到 VirtualScroller - 但并非所有元素都立即可见。然而，该元素足够长，因此所有元素都应该存在。 这是视图： 最后一个元素不可见，但它存在并已渲染。当我使用 ng serve 时，我可以看到该元素。 现在滚动时，不可见的项目将被渲染，但底部（现在不可见的部分）仍然不可见。当我移除项目周围的 p-tabView 时，它完全可见。我怎样才能解决这个问题？我想将其保留在选项卡视图中。 我刚刚找到了解决该问题的方法。关键是在选择选项卡时使用 ngIf 加载虚拟滚动。 对于您的示例，这意味着： <p-tabView (onChange)="changeTab($event)" class="main-tab-view" [style]="{'heigth':'100%'}"> <p-tabPanel header="TestVS"> <app-virtual-scroller *ngIf="scrollTabSelected"></app-virtual-scroller> </p-tabPanel> 在组件中： changeTab(ev) { this.scrollTabSelected = ev.index === 1; } 将索引更改为包含虚拟滚动的选项卡的索引。如果虚拟滚动位于第一个选项卡中，我还没有测试解决方案。 不是必须使用 changeTab(ev) { this.scrollTabSelected = ev.index === 1; } 如果使用 ng-template pTemplate="content" 解决这个麻烦 <p-tabPanel> <ng-template pTemplate="content"> <your-component> </ng-template> </p-tabPanel 我对 p-tabMenu 也有类似的问题，包括使用虚拟滚动的 p-table。对我来说，解决方法是在 p-tabMenu 组件上使用 ngIf 在选项卡模型存在时渲染该组件。

p-table：找出垂直滚动条的位置

我在 Angular 应用程序中有一个 PrimeNG p 表。 我在 Angular 应用程序中有一个 PrimeNG p 表。 <p-table #tab [value]="logs" [resizableColumns]="true" columnResizeMode="expand" [tableStyle]="{'min-width': '50rem'}" [columns]="colssel" styleClass="p-datatable-gridlines" [scrollable]="true" [scrollHeight]="getHeight ()" (onFilter)="setColFilter ($event)" [loading]="loading"> .... 我还有带过滤器的色谱柱。 我需要找出它的垂直滚动条是否在顶部。 我怎样才能做到这一点？ 您可以使用默认的 javascript domElement.scrollTop 键。 这将为您提供一个介于 0 和 n 之间的值，以显示其到元素相对顶部的距离。 因此，首先访问您想要的元素，然后检查scrollTop。如何访问该元素以及何时访问该元素取决于您。 示例： const element = document.getElementById('table'); const scrollTop = element?.scrollTop; const isPositionTop = scrollTop === 0 ? true : false; 正如我已经说过的，如何实施取决于你。通过 ViewChild 或 document. 选择器访问元素。通过单击或其他触发器调用逻辑。 重要的部分是：.scrollTop === 0表示您位于元素的顶部。

PrimeNG 角度工作台

我想对我的 进行一些更改，例如： 更改字体大小 更改按钮的颜色和大小 改变模态框的大小 我怎样才能做到这一点？ 我目前正在使用 :host ::ng-deep 来处理这些元素...

onRowSelect / onRowClick 根本没有被触发。 - Primeng 桌子 - Angular

我实际上需要遍历到另一个组件，其中单击行时选择了数据。我一直在使用 p-table 来执行相同的操作。我完全不知道为什么。 onRowClick / onRowSelection 做...

Primeng <p-checkbox> 默认状态且不可编辑

我是primeng新手。我的要求是页面加载，我有 3 行（名为 A、B、C），所有 3 行的名称旁边都有一个复选框。 现在，一旦页面加载，我就会获得

我需要使用 p-table 和 p-radioButtons 在 3 列的表标题中添加“全选”单选按钮功能。 Angular v16 和 PrimeNG -

我需要构建一个函数来检查 p 表中包含的单个列中的所有单选按钮 (p-radioButton)。 我将在三列的表格标题中有一个“全选”单选按钮

Angular 9 PrimeNg 如何设置 p 表边框颜色样式？

如何更改p表的边框颜色？我能够更改表的表头边框颜色，但我不知道如何更改 p 表主体的颜色。 正文 .ui-table .ui-ta...

PrimeNG 工具提示未显示

无论我将它们放在哪里，我都无法显示任何工具提示。每当我将鼠标悬停在触发工具提示的位置上时，屏幕似乎会变大（出现垂直滚动条，这应该......