primeng 相关问题

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...

PrimeNg <p-table>排序

我正在使用 primeNg 。我想实现数据排序。我所做的如下 排序.HTML 我正在使用 primeNg <p-table>。我想实现数据排序。我所做的如下 排序.HTML <p-table [columns]="cols" [value]="documents"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns" [pSortableColumn]="col.field"> {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td> {{doc.sName}} </td> <td> {{doc.sYear}} </td> <td> {{doc.sAge}} </td> <td> {{doc.sColor}} </td> </tr> </ng-template> </p-table> 排序.ts this.cols = [ { field: 'name', header: 'Name' }, { field: 'year', header: 'Year' }, { field: 'age', header: 'Age' }, { field: 'color', header: 'Color' } ]; ngOnInit(){ //made a service call and got data for this.documents=[{ "sName":"Jhon", "sYear":"1994", "sAge":"20", "sColor":"Red" }, { "sName":"Sam", "sYear":"1996", "sAge":"25", "sColor":"Red" }, { "sName":"Anna", "sYear":"1991", "sAge":"21", "sColor":"Green" }, { "sName":"Jhon", "sYear":"1999", "sAge":"25", "sColor":"Blue" }, { "sName":"Betty", "sYear":"1993", "sAge":"35", "sColor":"Red" }] } 目前只有Name字段进行排序，如何在其他列中也实现排序？我使用了 [pSortableColumn] 但列没有排序，我错过了某些点。你能指导我哪里错了吗？ PS：我无法使用<p-dataTable>。 要使用带有固定列的 Turbo 表/p 表进行排序，请尝试以下代码 <p-table #dt [value]="data"> <ng-template pTemplate="header"> <tr> <th [pSortableColumn]="'Name'">Name <p-sortIcon [field]="'Name'"></p-sortIcon> </th> <th [pSortableColumn]="'Age'">Age <p-sortIcon [field]="'Age'"></p-sortIcon> </th> <th [pSortableColumn]="'Height'">Height <p-sortIcon [field]="'Height'"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-col> <tr> <td>{{col.Name}}</td> <td>{{col.Age}}</td> <td>{{col.Height}}</td> </tr> </ng-template> </p-table> 如果我的问题是正确的，那么您并不是要求能够同时对多个列进行排序，而是简单地排序是行不通的。 在您的代码中，问题在于您在表标题中指定要排序的以下列字段： [pSortableColumn]="col.field" 这些字段定义为： this.cols = [ { field: 'name', header: 'Name' }, { field: 'year', header: 'Year' }, { field: 'age', header: 'Age' }, { field: 'color', header: 'Color' } ]; 但是您的数据以不同的名称到达： this.documents=[{ "sName":"Jhon", "sYear":"1994", "sAge":"20", "sColor":"Red" }, [...] "name" != "sName" 因此您的表无法对数据进行排序。 事实上，我很惊讶你说“名称”列是可排序的。 只需更改定义，代码即可运行。 无论如何，为了允许多列排序，我建议将代码更改为： <p-table [columns]="cols" [value]="documents" sortMode="multiple"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns" [pSortableColumn]="col.field"> {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc let-columns="columns"> <tr> <td *ngFor="let col of columns"> {{doc[col.field]}} </td> </tr> </ng-template> </p-table> 它也更轻，不需要更改 ts 文件，即使您从 Web 服务获取数据，因为从 html 文件的角度来看，您始终传递“文档”对象。 您需要启用多重模式才能使用 sortMode="multiple" 进行排序 - <p-table [columns]="cols" [value]="documents" sortMode="multiple"> 默认对单列执行排序，为了启用多字段排序，请将 sortMode 属性设置为“multiple”，并在点击另一列时使用metakey。 有关更多信息，请参阅文档 - https://primefaces.org/primeng/#/table TurboTable 还可以 <div class="table-responsive "> <p-table #turboTable [value]="claims" [rowHover]="true" [paginator]="true" [rows]="20" [showCurrentPageReport]="true" [first]="first" currentPageReportTemplate="Reclamos de {first} a {last} de {totalRecords} registros" [rowsPerPageOptions]="[10,25,50]"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="id" width="8%">ID <p-sortIcon field="id"></p-sortIcon></th> <th pSortableColumn="code" width="15%">CODE <p-sortIcon field="code"></p-sortIcon></th> <th pSortableColumn="customerClaimDate" width="18%">FECHA RECLAMO CLIENTE <p-sortIcon field="customerClaimDate"></p-sortIcon></th> <th pSortableColumn="claimDate" width="18%">FECHA CREACIÓN RECLAMO <p-sortIcon field="claimDate"></p-sortIcon></th> <th pSortableColumn="maximumResponseDate" width="15%">FECHA MAX RESPUESTA <p-sortIcon field="maximumResponseDate"></p-sortIcon></th> <th pSortableColumn="assignedUserName" width="17%">DERIVADO A <p-sortIcon field="assignedUserName" ></p-sortIcon></th> <th pSortableColumn="state" width="10%">ESTADO <p-sortIcon field="state"></p-sortIcon></th> </tr> </ng-template> <ng-template pTemplate="body" let-tblreclamos> <tr> <td> <span>{{ tblreclamos.id }}</span> </td> <td> <span><a [routerLink]="['edicion', tblreclamos.id]">{{ tblreclamos.code }}</a></span> </td> <td> <span>{{ tblreclamos.customerClaimDate }}</span> </td> <td> <span>{{ tblreclamos.claimDate }}</span> </td> <td> <span>{{ tblreclamos.maximumResponseDate }}</span> </td> <td> <span>{{ tblreclamos.assignedUserName }}</span> </td> <td> <span> <span [class]="'customer-badge'" *ngIf="tblreclamos.state==53">Borrador</span> <span [class]="'customer-badge status-warning'" *ngIf="tblreclamos.state==54">Pendiente</span> <span [class]="'customer-badge status-success'" *ngIf="tblreclamos.state== 55">Resuelto</span> <span [class]="'customer-badge status-danger'" *ngIf="tblreclamos.state==56">Anulado</span> </span> </td> </tr> </ng-template> </p-table> </div> customSort(event: SortEvent) { if (this.isSorted == null || this.isSorted === undefined) { this.isSorted = true; this.sortTableData(event); } else if (this.isSorted == true) { this.isSorted = false; this.sortTableData(event); } else if (this.isSorted == false) { this.isSorted = null; this.products = [...this.initialValue]; this.dt.reset(); } } sortTableData(event) { event.data.sort((data1, data2) => { let value1 = data1[event.field]; let value2 = data2[event.field]; let result = null; if (value1 == null && value2 != null) result = -1; else if (value1 != null && value2 == null) result = 1; else if (value1 == null && value2 == null) result = 0; else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2); else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0; return event.order * result; }); }

在 Angular 中的 PrimeNg 中自定义 TabMenu 或 TabView

说明： 我目前正在开发一个项目，我需要在 PrimeNg 中重新创建像 TabMenu/TabView 这样的小部件，但我在每个按钮上使用不同的路由器链接和自定义时遇到了麻烦...

在 PrimeNG 中删除 tabView 的边框

我试图通过设置以下内容从 p-tabView 元素中删除边框，但没有成功： 当我在开发者工具中删除边框时...

PrimeNG p-table 延迟加载在没有额外“点击”的情况下不会更新

我在一个延迟加载的项目中使用primeNG的p表。 但我在加载表格时遇到了一个问题，没有额外的“点击”。 在我的模板中，我有： 我在一个延迟加载的项目中使用 primeNG 的 p-table。 但我在加载表格时遇到了问题，没有额外的“点击”。 在我的模板中，我有： <p-table [value]="products" [totalRecords]="totalRecords" [tableStyle]="{ 'min-width': '50rem' }" [paginator]="true" [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[5,10,20]" [lazy]="true" (onLazyLoad)="loadProducts($event)" > 在我的组件中我有： products: ProductDTO[] = []; totalRecords : number = 5 ... loadProducts(event : TableLazyLoadEvent){ console.log(event); this.projectsOverviewService.getProducts() .subscribe((response:PagedListDtoOfProductDTO)=> { this.products = response.items; this.totalRecords = response.totalRecords; console.log("loaded products"); }); } 我已验证正在设置产品和总记录。 但我的表没有更新。仅当我单击分页器的下拉菜单时，才会呈现产品。 我也尝试将它与 OnInit 结合起来，但这也不会加载它。 仅当我仅使用 OnInit 方法并删除lazy="true" 和 onLazyLoad 时，我的表才能正确呈现。 我还尝试在其周围的额外容器中使用 observable 并将 *ngIf 与异步管道一起使用，但不起作用，因为 OnInit 方法（填充初始产品 observable 所必需的）不能与 OnLazyLoad 一起使用方法（它不断触发 TableLazyLoadEvents） 我已经找到问题了，根据给定的信息你是不可能知道的。 在我的 component.ts 中我已经配置了 @Component({ ... changeDetection: ChangeDetectionStrategy.OnPush }) 将其更改为 @Component({ ... changeDetection: ChangeDetectionStrategy.Default }) 解决了我的问题