primeng 相关问题

无法在全宽 PrimeNg 轮播的移动设备上垂直滚动页面

我在页面上有一个全宽轮播，页面的大部分区域都被轮播覆盖。在移动屏幕上，当我尝试垂直滚动时，它不起作用。 您可以在此处检查行为...

如何在 Angular 的 primeng 表中添加时间或持续时间的列过滤器

我在角度中使用primeng的p表，我想添加一个列过滤器来过滤时间/持续时间，但我只是找到了日期或日期时间，没有精确的解决方案。 我在角度中使用primeng的p表，我想添加一个列过滤器来过滤时间/持续时间，但我只是找到日期或日期时间，没有精确的解决方案。 我没有获得准确的时间/持续时间列过滤器。 您可以尝试创建自定义过滤器吗？如下所示： 组件.ts customDurationFilter 函数有两个参数：value（单元格值）和filter（过滤器值）。 它将值和过滤字符串分成几个部分（小时、分钟、秒）并进行比较。如果所有部分都匹配，则返回 true；否则，返回 false。 import { Component } from '@angular/core'; @Component({ selector: 'app-my-table', templateUrl: './my-table.component.html', styleUrls: ['./my-table.component.css'] }) export class MyTableComponent { data: any[] = [ { duration: '00:04:53' }, { duration: '00:03:20' }, // Add more data here ]; customDurationFilter(value: string, filter: string): boolean { if (!filter) { return true; } const filterParts = filter.split(':').map(part => parseInt(part, 10)); const valueParts = value.split(':').map(part => parseInt(part, 10)); for (let i = 0; i < filterParts.length; i++) { if (filterParts[i] !== valueParts[i]) { return false; } } return true; } } 用表数据源替换数据。然后，在 组件.html 使用 p-columnFilter 组件，并将 type="custom" 和 filterFunction 设置为自定义过滤器函数。 matchMode 设置为“custom”，表示正在使用自定义过滤器功能。 <p-table [value]="data"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="duration"> Duration <p-columnFilter type="custom" [field]="'duration'" [matchMode]="'custom'" [filterFunction]="customDurationFilter" display="menu"></p-columnFilter> </th> </tr> </ng-template> <ng-template pTemplate="body" let-rowData> <tr> <td>{{ rowData.duration }}</td> </tr> </ng-template> </p-table>

当使用 PrimeNG 以 Angular 方式切换外部手风琴时，内部手风琴会关闭

我正在使用 Angular 和 PrimeNG，并且有一个嵌套的手风琴，一个手风琴位于另一个内。问题是，当我打开内部手风琴并使其保持打开状态，然后打开并关闭

必需的属性不适用于 primeng <p-dropdown>

我正在开发一个 angular2 应用程序，我正在使用 primeng 作为 UI 元素。我有一些下拉菜单，其中的选项是通过 API 调用动态生成的。现在，当我点击...

primeng 编辑器在 Angular 17 升级后未加载

我将我的项目从 Angular 16 更新到 17。升级后，使用 quill 的 prime-ng 编辑器组件（从 v1.3.7 更新到 v2.0.2）无法渲染，并在兄弟上出现以下错误。 .

从 p-fileUpload 中删除临时文件选择时，您可以抓取仍在列表中的所有文件吗？

我有一个 Angular 应用程序，它使用 p-fileUpload 组件，该组件的 [multiple] 属性设置为 true，以便它可以一次上传多个文件。 到目前为止，这种做法效果相当好。 其中...

拖放不同组中的项目

我正在使用 PrimeNG 表和组重新排序。 目前，可以在同一组内拖放项目，但将项目从一个组拖放到另一组还不准确。嗬...

PrimeNG p-calendar 组件在使用 formcontrol 时出现 minDate 问题

我已将我的项目从 v15 升级到 Angular v18/PrimeNG v17，并在我的组件中： 我已将我的项目从 v15 升级到 Angular v18/PrimeNG v17，并在我的组件中： <p-calendar dateFormat="yy-mm-dd" formControlName="finish_date" [minDate]="today" > </p-calendar> 当我在数据库中保存日期并且是今天或过去时，该字段保持为空。 我只想为新输入设置 minDate，但如果已经保存，该字段应该显示过去的日期。 与primeng V18升级有关，添加[keepInvalid]="true"即可解决问题

如果有groupRowsBy，重排序后数据没有更正？

我用groupRowsBy创建了一个表，可以对行重新排序，但拖放行后结果没有改变。请帮我处理这个案子。 行组副标题 输入链接描述

Primeng 表 - 如果有 groupRowsBy，数据在重新排序后不会更正？

我用groupRowsBy创建了一个表，可以对行重新排序，但拖放行后结果没有改变。请帮我处理这个案子。 行组副标题 输入链接描述

手动关闭p日历日期选择器

我正在使用 PrimeNg 并具有 [touchUI]="true" 和 [showTime]="true" 这会弹出一个 datePicker，其覆盖层遮挡了网页的其余部分。这一切都运行良好。除了...

primeNG 多选更改不会在芯片移除时触发

下面是我的代码示例。 primeng 多重选择是 primeng 下拉列表的来源： HTML： 下面是我的代码示例。 primeng 多重选择是 primeng 下拉列表的来源： HTML： <p-multiSelect [options]="elements" [(ngModel)]="selectedElements" optionLabel="name" display="chip" (onChange)="onElementChange($event)"></p-multiSelect <p-dropdown [options]="availableElements" [(ngModel)]="selectedElement" optionLabel="elementID" placeholder="Select an Element"></p-dropdown> ts： onElementChange(event) { this.availableElements = []; this.availableElements = event.value; } 从多选下拉列表中选择元素完全有效，但是当我从多选芯片中删除元素时，不会触发 onChange 事件： 如何触发onChange？这是一个不受支持的事件吗？ 预先感谢。 这被认为是组件的一个错误，因为当你删除它时，内部状态已经更新...所以暂时你需要通过使用 onClick 事件和模板变量来获取组件值来更新状态。 <p-multiSelect [options]="cities" [(ngModel)]="selectedCities2" defaultLabel="Select a City" optionLabel="name" display="chip" (onClick)="selectedCities2 = elm.value" #elm> </p-multiSelect> {{selectedCities2| json}} stackblitz 演示 自12.2.2 primeng版本以来已修复错误 您可以调用 p-multiSelect 的 onChange() 事件，例如： <p-multiSelect [options]="cities" [(ngModel)]="selectedCities2" defaultLabel="Select a City" optionLabel="name" display="chip" (onChange)="selectedCities2 = elm.value" #elm> </p-multiSelect>

Angular 18 中 Flowbite 和 PrimeNG 的动画问题

我正在开发一个 Angular 18 zoneless 应用程序，使用 Flowbite 作为主要组件库，但我也必须安装 PrimeNG，因为我的表单需要 。 问题是，当我做广告时...

Angular Primeng 日历尺寸刻度

我想修改日历弹出日期时间选择器的大小（不是输入字段） 我应该在 SCSS 中使用什么样的语法？ 我尝试过： p-日历 { 字体大小：0.8rem； } p-日历 ...

即使设置了生命周期或设置了隐藏延迟，当触摸释放时，PrimeNg 工具提示也会在手机和平板电脑上消失

我正在为自定义按钮配置工具提示，并将方法分配给（touchstart）事件，因为 primeng 工具提示的悬停事件在平板电脑或手机中不起作用。 这是我的代码...

Angular tabView primeNG 路由

我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气 这是 HTML 我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气 这是html <p-tabView> <p-tabPanel header="Weather Data" routerLink="/weather-data"> <app-weather-data></app-weather-data> </p-tabPanel> <p-tabPanel header="Chart"> <app-chart></app-chart> </p-tabPanel> <p-tabPanel header="Heat index calculator" closable="true"> <app-heat-index></app-heat-index> </p-tabPanel> </p-tabView> 这是 module.ts import { RouterModule, Routes } from '@angular/router'; const appRoutes: Routes = [ { path: 'weather-data', component: WeatherDataComponent }, { path: 'chart', component: ChartComponent }, { path: 'heat-index', component: HeatIndexComponent }, ]; @NgModule({ declarations: [ AppComponent, WeatherDataComponent, ChartComponent, HeatIndexComponent, ], imports: [ BrowserModule, TabViewModule, ButtonModule, ChartModule, TableModule, HttpClientModule, InputNumberModule, FormsModule, SelectButtonModule, DropdownModule, BrowserAnimationsModule, FontAwesomeModule, InputSwitchModule, PaginatorModule, ReactiveFormsModule, RouterModule.forRoot(appRoutes), ], providers: [DatePipe], bootstrap: [AppComponent], }) export class AppModule {} 我找不到有关 tabView 组件的任何有关如何实现路由的文档，感谢任何帮助 我按以下方式使用了 TabMenu 组件。 <p-tabMenu [model]="items"> </p-tabMenu> <router-outlet></router-outlet> MenuItem 类型有一个命令属性，在命令上您可以实现自定义操作，在您的情况下可以是路由。 this.items = [ { label: "Map", icon: "pi pi-fw pi-map", command: () => { this.router.navigate(["./map"]) }, }, ];

Angular PrimeNG <p-columnFilter> 从 TypeScript 进行过滤时 UI 中断

我正在使用 Angular 18 和 PrimeNG 17，并且有一个包含 组件的表格。通过 UI 进行过滤效果很好，但是当我使用

如何获取所有内容之上或与自动完成控件同一级别的自动完成列表

我正在使用 Angular prime-ng 并与它一起使用 mat-autocomplete。 我已经使用过它并且工作得很好，但是当我在 prime-ng 侧边栏中重复使用它并单击表单字段时，它会显示选项列表

p-inputNumber 按钮 - 使用向下箭头时输入值为空

我使用 p-inputNumber 按钮来允许用户为表列选择过滤器值。 不幸的是，如果我使用向下箭头并选择值 0，则鼠标事件就不是

不更新与复选框关联的ngModel

<...