primeng 相关问题

PrimeNG TreeSelect - 如何在单击时展开节点（如果有子节点）？

我正在使用 PrimeNG 角度 TreeSelect 组件，并且我只想使没有子节点的节点可选择。 我的节点： 导出接口 ICategorySelectListDto { 身份证号; 标签：str...

PrimeNG 日历不会显示弹出窗口

我正在尝试使用 PrimeNG 标签打开日历，但每次单击标签都不会打开日历，这里是我的代码： 从 'primeng/calendar' 导入 {CalendarModule}； @NgModule({ 声明...

如何以角度同步两个独立的p分页器？

我正在为此苦苦挣扎。我的角度组件中有两个独立的 p-paginator 组件。我想让它们彼此同步。所以，如果我点击其中任何一个，另一个也应该更新......

primeng 徽章未检测到严重性变化

在我的 primeng 应用程序中，我有一个带有徽章的图标，声明如下： 在我的 primeng 应用程序中，我有一个带有徽章的图标，如下所示： <i (click)="showAllNotifications()" class="pi pi-bell mr-3 p-text-secondary" pBadge style="font-size: 2rem" [value]="badgeCount.toString()" [severity]="badgeSeverity"></i> 如您所见，徽章的值绑定到badgeCount，严重性绑定到badgeSeverity。 当我更新计数时，它会正确显示。当我最初指定严重性时，它也适用于所有 3 种类型，但是当我在同一位置更新严重性时，我更新计数，但它不会改变它（徽章的颜色保持不变）。 showAllNotifications(){ this.onShowAllNotifications.emit(); this.badgeSeverity=this.badgeSeverity1; this.badgeCount = 0; } setNotificationIcon(m:Message) { if (m.severity == MESSAGE_STRING_RESOURCE.SeverityError){ this.badgeSeverity=this.badgeSeverity3.slice(); }else if (m.severity == MESSAGE_STRING_RESOURCE.SeverityWarning) { if (this.badgeSeverity!=this.badgeSeverity3){ this.badgeSeverity=this.badgeSeverity2.slice(); } } this.badgeCount++; this.cdr.detectChanges(); } badgeCount:number = 0; badgeSeverity1='info'; badgeSeverity2='warning' badgeSeverity3='danger' badgeSeverity=this.badgeSeverity1 正如你所看到的，我尝试了一些方法，比如添加 .slice() 来获取新的引用和 cdr.detectChanges();手动触发更改检测，但都不起作用。 经过多次尝试，最终成功的是将徽章移出 <i (click)="showAllNotifications()" class="pi pi-bell" style="margin-top: 15px; font-size: 2rem"> <p-badge [severity]="badgeSeverity" [value]="badgeCount.toString()"></p-badge> </i> 为什么？不知道。 :)

p模板主体推断单个项目的类型

假设我们在 Angular 中有这样的模板，它使用 primeng p-table： <...

同时使用两个 UI 库？角

有人成功地将 PrimeNG 模板集成到不同的框架中吗？ 我正在使用 Infragistics 构建一个大型项目，并且希望集成 PrimeNG Apollo 模板。哈...

可编辑数据表中的多行文本框？

我在可编辑模式下使用PrimeNG DataTable。默认情况下，每个单元格中有一个单行文本框。 我使用自动换行：break-word；我的数据表中的样式，结果如下： 然而，当我...

PrimeNG 侧边栏可清除 primeng 消息。为什么？

在我的 app.component.html 中我有 ... 在我的 app.component.html 中我有 <div class="main"> <button type="button" (click)="onShowNotificationSideBar()" label="Show"></button> <p-sidebar [(visible)]="notificationSideBarVisible" position="right" [style]="{width:'50em'}"> <button type="button" pButton pRipple (click)="showSuccess()" label="S" class="p-button-success"></button> <button type="button" pButton pRipple (click)="showWarn()" label="W" class="p-button-warning"></button> <button type="button" pButton pRipple (click)="showError()" label="E" class="p-button-danger"></button> <h3>Messages</h3> <h5>{{messages}}</h5> <p-messages [(value)]="messages" [enableService]="false" ></p-messages> </p-sidebar> <p-toast position="center"></p-toast> <router-outlet></router-outlet> </div> 在 app.component.ts 中我有 import { Component } from '@angular/core'; import { Message, MessageService } from 'primeng/api'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], providers: [MessageService] }) export class AppComponent { title = 'WECO'; notificationSideBarVisible = false; constructor(private messageService: MessageService) { messageService.messageObserver.subscribe((m:Message | Message[])=>{ if (!Array.isArray(m)){ this.messages.push(m) } this.messages = [...this.messages]; }); } onShowNotificationSideBar(){ this.notificationSideBarVisible=true; } count=0; messages : Message[] = [ // { severity: 'success', summary: 'Success', detail: 'Message Content' }, // { severity: 'info', summary: 'Info', detail: 'Message Content' }, // { severity: 'warn', summary: 'Warning', detail: 'Message Content' }, // { severity: 'error', summary: 'Error', detail: 'Message Content' } ]; longSentence = 'Let’s end all this nonsense about how long sentences = run-on sentences. You can have a six-word run-on sentence (“I went shopping I ate donuts.”), while most of the sentences below are much, much longer than that and are not run-ons';//'And let’s end all this nonsense about how long sentences = run-on sentences. You can have a six-word run-on sentence (“I went shopping I ate donuts.”), while most of the sentences below are much, much longer than that and are not run-ons (except for a few examples like Jose Saramago). But whether the sentence is grammatically correct isn’t nearly as important as whether the sentence is fun or beautiful.' showWarn(){ let detail='User Deleted a Weco Rule'; if (this.count++%5===0) detail = this.longSentence; this.messageService.add({severity:'warn', summary:'User Action', detail: detail}); } showSuccess(){ let detail = 'Weco Rule 123 Saved'; if (this.count++%5===0) detail = this.longSentence; this.messageService.add({severity:'success', summary:'Service Call', detail:detail}); } showError(){ let detail = 'api-call:get-factories returned 404'; if (this.count++%5===0) detail = this.longSentence; this.messageService.add({severity:'error', summary:'Service Call', detail:detail}); } } 如果我打开侧边栏并在其中添加一些消息，它们就会出现，但是当我关闭并重新打开时，它们就会消失。 即使我可以看到 messages 变量仍然有它们。为什么？ 附： 如果我添加更多消息，我只会看到新消息。 侧边栏菜单有一个名为 p-messages 的组件，如果您检查该元素，您会发现关闭时 p-sidebar 的内容会被破坏。 当您重新打开侧边栏时，数据保持不变，但消息会被破坏。 我认为 p-messages 组件只会显示数组引用发生变化，这可能是由于组件内部的 *ngFor 带有 trackBy，所以我们需要重置内存中的每个数组元素引用，以便我们欺骗 p-messages 认为列表中有新消息，为此我们可以使用对象解构！我会在侧边栏打开时执行此操作(onShowNotificationSideBar) onShowNotificationSideBar() { this.notificationSideBarVisible = true; this.messages = [...this.messages.map(x => ({...x}))]; // <- creates new references for the array and its contents! } 完整代码 import { Component } from '@angular/core'; import { Message, MessageService } from 'primeng/api'; @Component({ selector: 'sidebar-basic-demo', templateUrl: './sidebar-basic-demo.html', providers: [MessageService], }) export class SidebarBasicDemo { title = 'WECO'; notificationSideBarVisible = false; constructor(private messageService: MessageService) { messageService.messageObserver.subscribe((m: Message | Message[]) => { if (!Array.isArray(m)) { this.messages.push(m); } this.messages = [...this.messages]; }); } onShowNotificationSideBar() { this.notificationSideBarVisible = true; this.messages = [...this.messages.map(x => ({...x}))]; } count = 0; messages: Message[] = [ // { severity: 'success', summary: 'Success', detail: 'Message Content' }, // { severity: 'info', summary: 'Info', detail: 'Message Content' }, // { severity: 'warn', summary: 'Warning', detail: 'Message Content' }, // { severity: 'error', summary: 'Error', detail: 'Message Content' } ]; longSentence = 'Let’s end all this nonsense about how long sentences = run-on sentences. You can have a six-word run-on sentence (“I went shopping I ate donuts.”), while most of the sentences below are much, much longer than that and are not run-ons'; //'And let’s end all this nonsense about how long sentences = run-on sentences. You can have a six-word run-on sentence (“I went shopping I ate donuts.”), while most of the sentences below are much, much longer than that and are not run-ons (except for a few examples like Jose Saramago). But whether the sentence is grammatically correct isn’t nearly as important as whether the sentence is fun or beautiful.' showWarn() { let detail = 'User Deleted a Weco Rule'; if (this.count++ % 5 === 0) detail = this.longSentence; this.messageService.add({ severity: 'warn', summary: 'User Action', detail: detail, }); } showSuccess() { let detail = 'Weco Rule 123 Saved'; if (this.count++ % 5 === 0) detail = this.longSentence; this.messageService.add({ severity: 'success', summary: 'Service Call', detail: detail, }); } showError() { let detail = 'api-call:get-factories returned 404'; if (this.count++ % 5 === 0) detail = this.longSentence; this.messageService.add({ severity: 'error', summary: 'Service Call', detail: detail, }); } } html <div class="main"> <button type="button" (click)="onShowNotificationSideBar()" label="Show"> show sidebar </button> <p-sidebar [(visible)]="notificationSideBarVisible" position="right" [style]="{width:'50em'}" > <button type="button" pButton pRipple (click)="showSuccess()" label="S" class="p-button-success" > success </button> <button type="button" pButton pRipple (click)="showWarn()" label="W" class="p-button-warning" > warn </button> <button type="button" pButton pRipple (click)="showError()" label="E" class="p-button-danger" > error </button> <h3>Messages</h3> <h5>{{messages}}</h5> <p-messages [(value)]="messages" [enableService]="false"></p-messages> </p-sidebar> <p-toast position="center"></p-toast> </div> Stackblitz 演示

未获得圆形输入开关primeng组件

我正在关注InputSwitch组件的primeng文档，其中该组件是圆形的，但我得到的是方形组件 附上图像 代码： 我正在关注InputSwitch组件的primeng文档，其中该组件是圆形的，但我得到的是方形组件 代码： <p-inputSwitch [(ngModel)]="isOn" (onChange)="handleChange()" ></p-inputSwitch> 我找不到任何边框或圆形属性 我们需要静态设计标签吗？没有任何标签相关道具支持 覆盖样式是可行的。 :host { ::ng-deep p-inputswitch .p-inputswitch-slider { border-radius: 30px; } ::ng-deep p-inputswitch .p-inputswitch-slider::before { border-radius: 50%; } }

尝试使用 Angular 和 PrimeNg 手动聚焦输入时我做错了什么？

我正在使用 Angular 和 PrimeNg。我有一个类似 Google Forms 的应用程序，在该应用程序的一部分中，我有一组选项，每个选项都有一个单选按钮。我可以有“其他”选项，用户可以手动

以反应形式过滤动态下拉菜单的选项选择

我有一个表单和一个动态添加字段组的规定，最初它显示一个字段组，然后添加或 X 它将添加和删除组 表单本身包含一个下拉菜单和场景...

如何使用 PrimeNG 多选搜索根据用户搜索输入触发 API 调用并使用检索到的数据填充多选？

当我们在过滤器部分输入文本时，我们需要调用 API 来获取相关的输出列表并将其更新为多选结果。 这里我尝试了onFilter事件来调用API，我得到了......

这个 PrimeNG 元素从哪里获得它的颜色以及如何更改它？

我正在开发一个 Angular 17 项目，使用 Clarity 和 PrimeNG 库进行样式设计。我在我的 angular.json 中包含了以下 css 文件： “node_modules/primeng/resources/themes/md...

PrimeNG multiSelect 选项未使用新值进行更新

最初 multiSelect 填充 100 个值，如果搜索字符串未在初始列表中列出，则在输入事件上实现服务器端搜索。 最初 multiSelect 填充 100 个值，如果搜索字符串未在初始列表中列出，则在输入事件上实现服务器端搜索。 <p-multiSelect [options]="options" class="multi-select-dropdown" [maxSelectedLabels]="0" resetFilterOnHide="true" [(ngModel)]="selectedValues" (onChange)="onChange($event)" (keyup.enter)="onSearchFilter($event)" [defaultLabel]="placeholder" [virtualScroll]="true" itemSize="25" [style]="{'min-width':'100%', 'max-width':'100%'}"> </p-multiSelect> 问题： 当用户搜索像“W101”这样的字符串时，如果列表中没有该字符串，则在多重选择中显示“未找到结果”。 当用户按 Enter 键时，将获取过滤结果，但 multiSelect 不会使用新值进行更新。它仍然显示“未找到结果”。 但是，如果我单击搜索框旁边的关闭图标（x）并打开下拉列表，则会显示过滤后的列表。 使用PrimeNG v12。 对我来说，一个可怕的解决方法是手动激活 onFilter 事件上的过滤器，以使用新值更新多选组件。 @ViewChild('mySelect') mySelect: MultiSelect; onFilter(event) { ... this.mySelect.options = newValues; this.mySelect.activateFilter(); ... } 希望这可以帮助任何人解决这个问题，但最重要的是希望这个问题可以在框架本身内部得到解决。 谢谢！

PrimeNG - 下拉菜单 - 如何通过在 ng-template 中添加一些字段来进行自定义

我想在 prime Ng 下拉列表中添加一个包含三个或四个控件的表单，而不是默认文本框。 我尝试使用 ng-template pTemplate="header" 以及 ng-template pTemplate="selecte...

我在Angular中使用primeNg的浮动标签文本输入，但最初在开始时，浮动标签与浏览器自动建议重叠

请在此处查看实时浏览器 开始时，当我启动应用程序时，浮动标签与自动建议重叠。请在这件事上给予我帮助。 我希望重新提供任何一个自动建议...

Primeng 多重选择未检测到更改值

*> > > *** > > 1.我的组件： > onClose() > { this.selectedWorkCenterData.forEach(数据 =>{ > > ...

即使我的订单在 angular.json 文件中正确，PrimeNG 的样式也不会被应用。 “styles.scss”正在覆盖它

我在我的 Angular 应用程序中使用 Prime NG，我也有一些自己的风格。我已将样式的优先级顺序集成到样式数组中的 angular.json 文件中。虽然我正在使用

PrimeNG 表：以编程方式处理行编辑 (pSaveEditableRow)

我正在使用 PrimeNG 表，如果存在需要在编辑模式下预先解决的任何自定义验证错误，我希望以编程方式处理保存行编辑。

PrimeNG Breadcrumb 组件生成奇怪的“/”

我尝试使用 primeng 在我的 Angular 项目中添加面包屑。我很快就在每个面包屑之间的小箭头上遇到了奇怪的“/” -我从 Prim 添加了 BreadcrumbModule...