primeng 相关问题

扩展primeng表格不显示表格行

我想对 primeng Table 组件进行一些更改。所以我从 primeng Table 扩展了一个自定义组件。 这是我的项目的代码：项目 这是扩展表的代码： 重要...

如何调整Prime NG P-Calendar 大小？ Angular 项目 P-日历尺寸太大

我使用动态对话框弹出，并在该组件内部使用 primeng p-calendar 进行日期跟踪。但是日历网格打开时p-calendar的大小非常大。我找不到解决方案...

Angular PrimeNG：切换按钮 - 动态设置其值

我有一个 PrimeNG 切换按钮。 我尝试设置是否返回关闭（使用函数 foo），它被用户设置为打开。 模板 我有一个 PrimeNG 切换按钮。 我尝试设置如果回到关闭（使用功能 foo）它被用户设置为打开。 模板 <p-toggleButton [(ngModel)]="myvar" (ngModelChange)="foo ()" onLabel="on" offLabel="off"></p-toggleButton> output={{ myvar }} 班级 myvar:boolean = false; foo () { myvar = false; } myvar 的输出始终为 FALSE - 正如预期的那样。但在 foo 中设置为 FALSE 不会影响按钮本身。 我需要进行“刷新”还是 ngModelChange 不是正确的回调？？ 使用 [(ngModel)]="myvar" 意味着您已经在使用双向绑定，这意味着如果您更改 HTML 中的 myvar 值，TS 将更新，反之亦然。 这意味着您根本不应该使用 (ngModelChange)="foo ()" 来设置任何值，因为这已经完成了。 要测试这个，请尝试这样做： foo () { console.log(this.myvar); } 现在尝试单击按钮打开浏览器控制台，看看该值是否已经发生变化。

使用primeNG表格时，如何在点击另一行时退出行编辑

我知道 primeNG 使用 让编辑=“编辑” 我知道 primeNG 使用 let-editing="editing" <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(product)" class="p-button-rounded p-button-text"></button> <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(product)" class="p-button-rounded p-button-text p-button-success mr-2"></button> <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(product, ri)" class="p-button-rounded p-button-text p-button-danger"></button> 做某事。 但是我怎样才能完成我所需要的标题。 <td style='width: 160px;' pCancelEditableRow> {{field.fName}} </td> 我尝试添加顶部代码来做一些粗暴的事情。 以下是在单击 PrimeNG 表中的另一行时实现退出行编辑所需行为的代码： <p-table [value]="products" dataKey="id"> <ng-template pTemplate="header"> <tr> <th></th> <th>Name</th> <th>Price</th> <th>Action</th> </tr> </ng-template> <ng-template pTemplate="body" let-product let-rowIndex="rowIndex" let-editing="editing"> <tr [pEditableRow]="product" [pEditing]="editing"> <td> <button *ngIf="!editing" pButton type="button" icon="pi pi-pencil" (click)="onRowEditInit(product, rowIndex)" class="p-button-rounded p-button-text"></button> <button *ngIf="editing" pButton type="button" icon="pi pi-check" (click)="onRowEditSave(product, rowIndex)" class="p-button-rounded p-button-text p-button-success mr-2"></button> <button *ngIf="editing" pButton type="button" icon="pi pi-times" (click)="onRowEditCancel(product, rowIndex)" class="p-button-rounded p-button-text p-button-danger"></button> </td> <td> <div *ngIf="!editing; else editMode"> {{ product.name }} </div> <ng-template #editMode> <input type="text" [(ngModel)]="product.name"> </ng-template> </td> <td> <div *ngIf="!editing; else editMode"> {{ product.price }} </div> <ng-template #editMode> <input type="text" [(ngModel)]="product.price"> </ng-template> </td> <td> <button *ngIf="editing && rowIndex !== editingRowIndex" pButton type="button" icon="pi pi-check" (click)="onRowEditSave(products[editingRowIndex], editingRowIndex)" class="p-button-rounded p-button-text p-button-success"></button> <button *ngIf="editing && rowIndex !== editingRowIndex" pButton type="button" icon="pi pi-times" (click)="onRowEditCancel(products[editingRowIndex], editingRowIndex)" class="p-button-rounded p-button-text p-button-danger"></button> </td> </tr> </ng-template> </p-table> 在此代码中，我对您现有的代码进行了一些修改。关键的变化是我在每行的“保存”和“取消”按钮中添加了一个条件 rowIndex !== editingRowIndex。此条件可确保仅当当前正在编辑的行与您单击的行不同时才显示保存或取消编辑的按钮。这样，点击另一行就会退出上一行的编辑模式。 editingRowIndex 变量用于跟踪当前正在编辑的行。

无法在confirmPopup消息中换行 - primeNg

我正在使用 primeNG v11，我需要在确认弹出窗口的短信中创建一个断行。我已经尝试过 但不起作用。 我的短信包含两个短语，女巫也会弹出窗口

保持 PrimeNG p 菜单栏保持在视口内

我一直在使用 PrimeNG 的 p 菜单栏，但我遇到一个问题，如果您有以下代码： 我一直在使用 PrimeNG 的 p 菜单栏，但我遇到一个问题，如果您有以下代码： <p-panel> <div class="d-flex"> <div class="flex-grow-1"> <p-menubar [model]="menuItems" styleClass="border border-0 rounded-0 pt-0 pb-0"> </p-menubar> </div> <div> <p-menubar [model]="endMenuItems" styleClass="border border-0 rounded-0 pt-0 pb-0"> </p-menubar> </div> </div> 让我们在 OnInit() 函数中用虚拟内容填充这些项目 this.menuItems = [ { label: "Label 1", icon: "", items: [ { label: "Dummy Item 1" }, { label: "Dummy Item 2" } ], }, { label: "Label 2", icon: "", items: [ { label: "Dummy Item 1" }, { label: "Dummy Item 2" } ], }, ]; this.endMenuItems = [ { label: "Label 1", icon: "", items: [ { label: "Dummy Item 1" }, { label: "Dummy Item 2", items: [ { label: "Dummy Item 1" }, { label: "Dummy Item 2" } ] } ] } ]; 如您所见，带有 endMenuItems 的 p 菜单栏在标签 2 下嵌套了一个子菜单。这里的问题是，这会推动我的视口扩展并溢出水平滚动条。我希望它改为打开左侧病房，以便菜单保留在视口内。 我尝试引用相对于子菜单的不同类并为此使用自定义CSS right: 100% important但这仍然被PrimeNG覆盖，即使我使用::ng-deep ::ng-deep .p-tieredmenu { .p-menuitem-active { .p-tieredmenusub { .p-submenu-list { right: 100% !important; } } } } 如有任何帮助，我们将不胜感激！ 这是 stackblitz 的链接 如果您想更深入地设置 primeng 组件的样式，则必须使用 styleClass 属性引用要设置样式的项目。 例如： p-card 主体细分如下 p-card > p-card-body > p-card-content。 您可以通过添加相应的 p-card-body 来轻松修改 p-card-body : <p-card> <ng-template pTemplate="body">card body</ng-template> </p-card> 有时 primeng 允许您使用相应的 pTemplate 属性来重载模板，有时由于内部 css 重载而不起作用。 然后您可以使用 styleClass 属性来指定要修改的元素： <p-card styleClass="main-card">main card content</p-card> .main-card .p-card-body .p-card-content { padding: 0; } 当然，cou 也可以使用简单的类属性来设置 ng-tamplate 标签内内容的样式。

使 PrimeNG 自动完成建议列表出现在焦点上

希望你们一切都好。我目前正在努力解决primaryNG 的自动完成（多模式）组件行为。 我想要的是 我希望显示自动完成建议列表

如何使用 Angular 2 将我的 json 数据导出为 pdf、excel

我已经从 Angular 2 网站创建了我的数据表。现在我想使用 Angular 2 框架将 json 数据导出到 PDF、Excel。 请给我建议如何实现该目标或任何链接，如果......

PrimeNg 自动完成建议未加载

我正在尝试在我的项目中实现 PrimeNg AutoComplete 控件。 我指的是这个 PrimeNg 这些是我遵循的步骤。 1. 新增模块。 从 'primeng/

PrimeNG 表 - 将类应用于行但背景颜色不起作用

我正在使用 PrimeNG 表 。 它具有虚拟滚动和可选择的行。 我想根据数据中的某个整数值使行背景颜色变量。 使用这个建议...

primeng 表变量行背景颜色未设置

我正在使用Primeng桌子 我正在使用Primeng桌子 使用此建议：https://www.geeksforgeeks.org/angular-primeng-table-styling-certain-rows-and-columns/ 我添加了 [ngClass] = 'myRowClass(row.version)': <ng-template pTemplate="body" let-row> <tr style="height:53px;" [ngClass] = 'myRowClass(row.version)' [pSelectableRow]="row" (selectstart)="selectRow($event)" > 哪里 public myRowClass(v) { return v<3 ? 'greenBkg' : v<5 ? 'yellowBkg' : 'redBkg'; } 和 ::ng-deep .redBkg > tr { background-color: 'red' !important; } tr.greenBkg{ background-color: 'green' !important; } .yellowBkg{ background-color: 'yellow' !important; } 我确实看到所有 3 个类名都出现在生成的 html 中，但它们都不会导致颜色变化。这是我在“检查”中看到的示例： <tr _ngcontent-nqh-c186="" class="p-element greenBkg p-selectable-row" style="height: 53px;" ng-reflect-ng-class="greenBkg" ng-reflect-data="[object Object]" tabindex="0"><td .... 以下是版本： "dependencies": { "@angular/animations": "^15.2.4", "@angular/cdk": "^15.2.7", "@angular/common": "^15.2.4", "@angular/compiler": "^15.2.4", "@angular/core": "^15.2.4", "@angular/flex-layout": "^15.0.0-beta.42", "@angular/forms": "^15.2.4", "@angular/platform-browser": "^15.2.4", "@angular/platform-browser-dynamic": "^15.2.4", "@angular/router": "^15.2.4", "primeng": "^15.4.1", 从background-color语法来看，应该是： background-color: <color> 删除引号。并且您的红色背景将无法正常运行。 .redBkg > tr 当前的样式规则会将红色背景应用于父元素为“redBkg”类的 <tr> 元素。 你的 CSS 应该是： .redBkg { background-color: red !important; } .greenBkg { background-color: green !important; } .yellowBkg { background-color: yellow !important; } 演示@StackBlitz

PrimeNg (v15.x) 在做出选择后清除结束日期时未清除验证状态？

PrimeNg (v15.x) 日历 onSelect 不清除错误消息，并且在最初输入不正确的值然后清除该值时，表单验证状态不会重置！ 请查看代码片段...

Angular - PrimeNG：sortField、sortOrder 和重置无法正常工作

https://primefaces.org/primeng/showcase/#/table 首先，我希望表最初在我的“订单”列上执行订单：它有效。 然后，用户可以自己手动更改排序

在primeng中动态更改表格复选框状态

我是primeng的新手。我正在使用底漆表。默认情况下，使用 [(selection)] 选中某些复选框。但现在我想基于几个复选框 cli 动态更新一些复选框...

使用reactiveForms和FileUpload组件角度上传文件

我使用primeng作为模板。 我正在使用 p-fileupload 组件，但我需要以反应形式使用它，所以我想知道将 formControlName 放在哪里，因为我没有得到任何输入或其他东西...

tableHeaderCheckbox 在使用 ptable 第一次加载页面时被禁用

我正在使用 ptable ，并且该标头包含 ptableHeaderCheckbox 。默认情况下，当页面加载时，表标题上的此标题复选框将被禁用。仅当我单击复选框时它才会启用...

使用 TypeScript 翻译 PrimeNG 的菜单栏组件

我想翻译 primeNG 菜单栏组件。但我不知道如何处理 .ts 文件内的翻译。我想从 .json 文件获取翻译数据。 从...导入 { TranslateService }

PRIMENG。如何在打开子菜单时将 p-panelmenu-icon 的图标替换为插入符号？

我在 Angular 11 项目中使用 Primeng 版本 11。我正在使用 primeng 创建面板菜单，我想将 p-panelmenu-icon 更改为 fa-caret-right，但我不知道如何将图标更改为 fa-

prime ng下拉16.2版本

我需要问如何添加虚拟滚动到下拉菜单并通过api后端连接下拉菜单中的虚拟滚动 意思是当我骶骨结束时 调用我的 api，并在 prime NG 最后的页面索引中添加加 1

如何修剪 Angular 5 中 primeNg Dropdown（p-dropdown）过滤器中的空间？

我在我的 Angular 5 项目中使用了 primeNg 下拉列表（p-dropdown），但是当我尝试过滤下拉列表数据并且我在该下拉列表之后给出了空间，显示未找到结果，那么我该如何解决这个问题？...