primeng 相关问题

全局过滤器 PrimeNG Angular2

如何在 primeng angular2 中应用多个全局过滤器，例如全局过滤器中的一个输入、下拉列表和日期范围？ 如何添加其他内容，例如下拉菜单和日期范围。 对于输入，我们可以使用： &...

如何设置p-table的高度为窗口高度

问题： 我正在尝试以角度设置素数 p 表的高度。我已经在网上搜索并找到了很多结果，但到目前为止没有一个有效（可能是因为这个问题存在于很多人身上......

在 PrimeNG 对话框中应用样式

我在尝试在 PrimeNG 对话框中应用样式时遇到问题。 我有一个带有 PrimeNG 对话框的组件： 我在尝试在 PrimeNG 对话框中应用样式时遇到问题。 我有一个带有 PrimeNG 对话框的组件： <p-dialog header="Filters" [(visible)]="display" width="1000" height="1000" modal="modal"> ... </p-dialog> 我还有一个 scss 文件，其中包含组件的样式。对话框的背景颜色是透明的，但我想将其设置为白色。所以我尝试在我的 scss 文件中以不同的方式应用样式： .ui-dialog { background-color: #fff; } 将 styleClass 添加到对话框并尝试对其应用样式： <p-dialog styleClass="dialog-filters" header="Filters" [(visible)]="display" width="1000" height="1000" modal="modal"> .dialog-filters { background-color: #fff; } 它们都不起作用。有什么想法吗？ 对于样式参数，您应该使用 use []。因此，当您想将内联样式应用于 p-dialog 时，例如 <p-dialog [style]="{'margin-left':'80px', 'margin-right':'80px'}"></p-dialog>。 我必须承认，当 primeng 需要 []、什么都不需要或 [()] 时，我自己很困惑，至少在查看他们的网站时，该网站不经常更新。所以你最好看看他们在 github 上的源代码。 您可以使用 styleClass 的 p-dialog 属性，如下所示， <p-dialog header="Title" [(visible)]="display" modal="modal" width="300" styleClass="active" > .... css 文件中的样式将如下 .active{ background-color:red } 或者，如果您使用 ui-dialog 类，则应该按如下所示的层次结构使用它们 p-dialog .ui-dialog { background-color: red; } 现场演示包含两种方法 如果您正在寻找从 html 修改现有类。 <p-confirmDialog header="Confirmation" appendTo="body" width="425" icon="pi pi-exclamation-triangle" > <style type="text/css"> .ui-widget-overlay.ui-dialog-mask { opacity: 0 !important; } </style> </p-confirmDialog> 还要确保设置：封装值 @Component({ encapsulation: ViewEncapsulation.None }) 使用以下CSS方法 :host ::ng-deep .ui-dialog .ui-dialog-titlebar{ background: tomato; } @kishor 的解决方案对我有用。另外，如果您想将样式专门应用于对话框，那么您可以使用 styleClass 为其分配一个类，并在 CSS 中使用该类。 <p-dialog position="center" modal="true" styleClass="customDialog"> ... </p-dialog> // DIALOG BOX :host { ::ng-deep .customDialog { background-color: white !important; width: 92vw !important; box-shadow: 0px 20px 20px #D8DDE680; border: 1px solid rgb(231, 231, 231); } } PrimeNg 12 更新： 所有提到的解决方案对我没有任何作用或产生奇怪的结果。 我必须在 p-dialog 上使用 styleClass="custom-dialog" 并在我的 styles.scss 文件中创建 .custom-dialog，如下所示： .custom-dialog { max-width: 90%; border: 6px solid white !important; border-radius:18px !important; } 要覆盖除宽度和高度属性之外的任何内容，您需要使用！重要。 "primeng": "^14.1.2", 在 styles.scss 中 .p-dialog .p-dialog-header { background: red; color: #333333; } .p-dialog .p-dialog-content { background: red; color: #333333; padding: 1rem; } .p-dialog .p-dialog-footer { background: red; color: #333333; }

粘性标题不适用于 Primeng 中可调整大小的列。？

我正在尝试实现列调整大小和粘贴标题。但如果我不使用列调整大小，粘性标题就可以正常工作。如果我同时实现这两个功能，则列调整大小可以正常工作，但粘性标题不起作用...

如何将工具提示添加到 primeNG 表中的特定标题列

Html HTML <p-table #dt1 [columns]="cols" [value]="cars1"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns"> {{col.header}} </th> </tr> </ng-template> </p-table> TS export class Table implements OnInit { cols: any[]; ngOnInit() { this.cols = [ { field: 'year', header: 'Year' }, { field: 'brand', header: 'Brand' }, { field: 'color', header: 'Color' } ];}} 我只想为品牌栏显示工具提示 在 Angular 9.1.3 上使用 PrimeNG 9.2.1 版本 使用 primeNg 工具提示 docs <th *ngFor="let col of columns" [pTooltip]="col.field === 'brand' ? col.header : null"> {{col.header}} </th> 根据需要放置实际的工具提示值，而不是在 col.header 之后放置 ?。 您可以更新 cols 以包含一些 pTooltip 值。 组件 this.cols = [ { field: 'year', header: 'Year' , tooltip: 'Year 📅'}, { field: 'brand', header: 'Brand' }, { field: 'color', header: 'Color' , tooltip: 'Color of 🧙‍♂️'} ]; 模板 <p-table #dt1 [columns]="cols" [value]="cars1"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns" [pTooltip]="col.tooltip"> {{col.header}} </th> </tr> </ng-template> stackblitz 演示

PrimeNG：p-inputNumber 的 CSS 背景

我正在使用 PrimeNG 并找到一种方法来设置 p-inputNumber 控件的背景颜色。 它与 pInputText 一起工作正常。 我正在使用 PrimeNG 并找到一种方法来设置 p-inputNumber 控件的背景颜色。 它与 pInputText 一起工作正常。 <!-- OK --> <input pInputText type="text" style="background: red;"/> <!-- Not OK --> <p-inputNumber [showButtons]="true" style="background: red;"></p-inputNumber> 我也找到了内联属性。 <p-inputNumber [showButtons]="true" [inputStyle]="{background: 'red'}"></p-inputNumber> p-inputNumber是一个组件，而不是一个简单的输入元素，它以不同的方式在文档页面的基础上设置样式，您可以使用属性inputStyleClass为内部输入元素添加一个类 在全局样式文件中添加css类 样式.css input.bg-red{ background:red; color:#fff; } 模板 <p-inputNumber inputStyleClass="bg-red" [(ngModel)]="value1"></p-inputNumber> StackBlitz 演示

表头按钮 primeng 上的菜单显示问题

我正在使用Primeng，单击按钮时无法正确显示此菜单。正如您在此图中看到的，菜单显示在远离按钮的表标题外部。我需要什么...

PrimeNG 表行中的 PrimeNG 自动完成会引发编译器错误“模板变量是只读的。”

编译器产生错误： 错误：无法将值“$event”分配给模板变量“customerRow”。模板变量是只读的。 我可以切换到 [ngModel]="customerRow&

如何在对话框中获取上传的文件

我正在创建一个角度程序，我想上传一个文件，上传的文件我想在弹出窗口中打开，当我在弹出窗口中单击“确定”时，它就会上传，请帮助我如何获取上传的文件...

PrimeNG 自动完成下拉菜单切换无法按预期工作

我正在使用 primeNG 自动完成下拉列表。我已经遵循了文档中的所有内容。他们的切换似乎工作正常，但我的不行。对我来说，第一次单击下拉按钮...

当菜单/子菜单展开时如何向primeng面板菜单添加类？

我在 Angular 11 项目中使用 Primeng 版本 11。我正在使用 primeng 创建面板菜单，并且我想在菜单/子菜单展开时向其添加“活动”类。我已经尝试过...

primeNG 复选框 onchange 方法未触发

我们使用 PrimeNG 复选框来选择和取消选择产品，在桌面上选择和取消选择它工作正常，在 Ipad 中选择复选框 onChange 时被调用，在

core.js：4197错误TypeError：chart_js__WEBPACK_IMPORTED_MODULE_2__不是构造函数

我在使用 ChartJS 和 primeNG 时遇到此错误： 错误 TypeError：chart_js__WEBPACK_IMPORTED_MODULE_2__ 不是构造函数 在 UIChart.initChart (primeng-chart.js:48) 在 UIChart.ngAfterVie...

PrimeFlex 未正确渲染网格

我有一个新的 Angular 项目，我正在尝试为其创建网格布局。但是，它渲染不正确。 这是 HTML： 我有一个新的 Angular 项目，我正在尝试为其创建网格布局。但是，它渲染不正确。 这是 HTML： <div class = "grid"> <div class = "col-12"> Header/nav</div> <div class = "col-12"> Top tabs</div> <div class = "col-2">side nav</div> <div class = "col-7">main body</div> <div class = "col-5">widget</div> </div> 但这就是它渲染数据的方式： 我将其添加到 angular.json 中： , "styles": [ "node_modules/primeng/resources/themes/lara-light-blue/theme.css", "node_modules/primeng/resources/primeng.min.css", "src/styles.scss" ], 并将其添加到 styles.scss @import "primeng/resources/themes/lara-light-blue/theme.css"; @import "primeng/resources/primeng.css"; 我错过了什么？ 看来你想使用primeflex grid 要使用它，请确保您具有 package.json -> "primeflex": "^3.3.0" 中的依赖项，并在 angular.json 中导入样式 "styles": [ "./node_modules/primeflex/primeflex.css", "src/styles.css" ], 请参阅此 stackblitz primeflex 示例中的配置

将图标添加到 PrimeNg TabView 标题的最右上角

我需要在 PrimeNG TabView 的最右上角放置一个图标 我正在寻找这样的东西 出于演示目的，我在文档中打开了 stackblitz 并对 css 进行了硬编码，但它......

Prime ng 11.4.0 波纹动画不起作用

我已经在我的 Angular 应用程序中成功安装了 primeng ！样式工作正常，但按钮点击上的波纹动画不起作用！ 在我的应用程序组件中 - 从 'primeng/api' 导入 { PrimeNGConfig }...

ngModel 已更新，但更改未显示在 PrimeNG 复选框的视图中

我有一个 PrimeNG 复选框列表。我有一个用 ngModel 绑定到它的数组，名为 selectedItems。我还初步检查了该数组中的项目。我遇到了一种情况，我将项目添加到

如何根据用户选择的选项动态更改primeNG选择按钮颜色

我正在使用 PrimeNG 的 p-selectButton，我想知道是否可以根据用户选择的选项更改按钮的颜色。例如： 如果用户选择 &qu...

Primeng：p-日历部分隐藏在p-dialog后面[关闭]

在 Angular 中使用 primeng 工作时，当放置在 p 对话框内时，p 日历组件的弹出窗口未按预期方式显示（与其他组件一起剪切）。 例如：它隐藏在...

Angular 正在从日历组件中减去 1 天

我有一个来自 PrimeNg 的日期表单组件，每当我提交表单时，它都会减去 1 天： 我在我的 API 中得到了这个 "日期计划": "2021-04-29" 在后端它被声明 @JsonF...