primeng 相关问题

除了appendTo="body"之外，如何避免p-dropdown在正文滚动时关闭

我在我的项目中使用 Angular 版本 12 和 PrimeNG 版本 12。同样，我使用 primeng 下拉菜单，该下拉菜单在滚动主体时关闭。使用appendTo =“body”不会关闭...

在PrimeNG中按退出按钮会使网站挂起两秒

我正在使用 Angular 和 PrimeNG，我有一个应用程序，其中一个视图使用两个表。一张表包含 200 行，其他表包含 10 行。 当我按下 escape 时，这就是我得到的下一个堆栈......

在折线图上显示值 Prime NG Angular 16

在此输入图像描述 我想在图表上显示这样的值 在此输入图像描述 我正在使用 Angular 16 和图表素数 Ng 请帮我 我正在尝试在 c 上显示价值...

导入浏览器模块时出错，已经导入了 commonModule，当 p 下拉菜单打开时，animationBrower 也显示错误

NG05100：来自“BrowserModule”的提供程序已被加载。如果您需要访问常见指令（例如 NgIf 和 NgFor），请导入“CommonModule”。 导入 { 组件，OnInit ...

primeng p-对话框样式覆盖

我有一个 p-dialog，当应用程序在 app.component.html 文件中加载时显示，如下所示。 当应用程序在 app.component.html 文件中加载时，我会显示一个 p 对话框，如下所示。 <div class="banner"> <p-dialog [(visible)]="displayBanner" [modal]="true" [style]="{width: '70vw'}" [baseZIndex]="10000" [showHeader]="false" [draggable]="false" [resizable]="false"> <banner (notify)="onNotify($event)"></banner> </p-dialog> </div> 这将显示应用程序横幅。当此对话框出现时，我必须将背景颜色覆盖为黑色。所以添加了如下CSS。 .p-dialog-mask.p-component-overlay { background-color: #000; } 关闭对话框后，我会看到每个页面的正常显示。页面内有几个删除功能，相应的 html 中有确认代码，如下所示。 <p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog> 此确认使用相同的 css .p-dialog-mask.p-component-overlay，因此这又将背景变为黑色。因此，我尝试通过在横幅页面的 p-dialog 中使用 styleClass : background-color: #000; 来删除背景颜色为黑色的 css，如下所示： <div class="banner"> <p-dialog [(visible)]="displayBanner" [modal]="true" [style]="{width: '70vw'}" styleClass="bgColorChange" [baseZIndex]="10000" [showHeader]="false" [draggable]="false" [resizable]="false"> <banner (notify)="onNotify($event)"></banner> </p-dialog> </div> 在CSS中如下： .bgColorChange { background-color: #000; } 但这并没有覆盖CSS，它看起来是正常的背景。 如何为 p-dialog 应用 2 种不同的样式？由于黑色背景仅出现在应用程序横幅中，该横幅在应用程序加载时显示，我想我应该应用于 p-dialog 标签，但它不会生效。 任何意见都将受到高度赞赏。 尝试 p-dialog ::ng-deep .bgColorChange { background-color: #000; }

PrimeNG、InputOtp -- 当 InputOtp 具有 [integerOnly]="true" 时数字键盘不工作

在PrimeNG中，InputOtp 当我们提供 [integerOnly]="true" 时，数字键盘（键盘右侧）不起作用。 注意：Num Lock 已关闭 在 PrimeNG 中，InputOtp 当我们提供 [integerOnly]="true" 时，数字键盘（键盘右侧）不起作用。 注意：Num Lock 已关闭 <div class="card flex justify-content-center"> <p-inputOtp [(ngModel)]="value" [integerOnly]="true"></p-inputOtp> </div> export class InputOtpIntegerOnlyDemo { value : any } <div class="card flex justify-content-center"> <p-inputOtp [(ngModel)]="value" [integerOnly]="true" (keydown)="onKeyDown($event)"></p-inputOtp> </div> 在您的组件类中： import { Component } from '@angular/core'; @Component({ selector: 'input-otp-integer-only-demo', templateUrl: './input-otp-integer-only-demo.html' }) export class InputOtpIntegerOnlyDemo { value: any; onKeyDown(event: KeyboardEvent) { // Allow only numeric keypad inputs if ( (event.key === '0' || event.key === '1' || event.key === '2' || event.key === '3' || event.key === '4' || event.key === '5' || event.key === '6' || event.key === '7' || event.key === '8' || event.key === '9' || event.key === 'Tab' || event.key === 'Backspace' || event.key === 'Delete' || event.key === 'ArrowLeft' || event.key === 'ArrowRight') && !event.ctrlKey && !event.altKey && !event.metaKey ) { // Allow the key press return; } // Prevent the default behavior for other keys event.preventDefault(); } }

无法绑定到“value”，因为它不是“p-galleria”的已知属性

我一定是做了一些愚蠢的事情，因为我在其他地方找不到这个问题。 我正在尝试使用 PrimeNG 的 Galleria，但我无法超越基础知识。 我正在使用许多其他 PrimeNG 组件......

primeng p-tree 预选不适用于partialSelected，可选设置为 true

我使用 primeng 的 p-tree 组件来显示不同的情况。 没有预选的显示部分工作正常。现在，一旦我将其保存到数据库并且用户再次打开相同的数据，我必须获得

你能得到 Cypress 测试来为 p-fileUpload 进行文件上传吗？

我有一个使用 p-fileUpload 的应用程序，我正在为其编写 Cypress 测试。 我想也许我可以使用 selectFile 方法来做到这一点 - 但这并没有奏效。 这是我的 p-fileUpload

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 它将添加和删除组 表单本身包含一个下拉菜单和场景...