primeng 相关问题

PrimeNG 表库过滤工作正常 - 文档不清楚或可能已过时

我的目标是在表格组件中显示个人列表，并根据某些条件进行过滤和/或搜索。我的模板代码如下： 我的目标是在表格组件中显示个人列表，并根据某些条件进行过滤和/或搜索。我的模板代码如下： <div class="flex flex-col bg-gray-100 p-6 mx-auto w-auto"> <header class="bg-white shadow p-4 flex items-center justify-between"> <h1 class="text-lg font-bold">East Portland Constituency Voters </h1> <div> <button class="bg-blue-600 text-white px-4 py-2 rounded">Logout</button> </div> </header> <br> <div class="mt-8 bg-white p-6 rounded shadow mb-4"> <div class="card"> <p-table #dt [value]="voters" dataKey="id" [rows]="10" [globalFilterFields]="['firstName', 'lastName', 'email', 'affiliation', 'role', 'gender']" [rowsPerPageOptions]="[10, 25, 50]" [paginator]="true" [tableStyle]="{ 'min-width': '75rem' }"> <ng-template pTemplate="caption"> <div class="flex justify-between"> <p-button label="Clear" [outlined]="true" icon="pi pi-filter-slash" (onClick)="clear(dt)" /> <span class="p-input-icon-left ml-autod"> <i class="pi pi-search"></i> <input pInputText type="text" [(ngModel)]="searchValue" (input)="dt.filterGlobal(getEventValue($event), 'contains')" placeholder="Search for voter" /> </span> </div> </ng-template> <ng-template pTemplate="header"> <tr> <th style="min-width:10rem"> <div class="flex align-items-center"> First Name </div> </th> <th style="min-width:10rem"> <div class="flex align-items-center"> Last Name </div> </th> <th style="min-width:15rem"> <div class="flex align-items-center"> Email </div> </th> <th style="min-width:15rem"> <div class="flex align-items-center"> Affiliation </div> </th> <th style="min-width:15rem"> <div class="flex align-items-center"> Role </div> </th> <th style="min-width:15rem"> <div class="flex align-items-center"> Gender </div> </th> </tr> <tr> <th></th> <th></th> <th></th> <th style="min-width:15rem"> <div class="flex align-items-center"> <p-columnFilter field="affiliation" matchMode="in" [showMenu]="false"> <ng-template pTemplate="filter" let-filter="filterCallback" > <p-multiSelect [(ngModel)]="selectedAffils" [options]="affiliations" placeholder="Any" (onChange)="filter($event.value)"> </p-multiSelect> </ng-template> </p-columnFilter> </div> </th> <th style="min-width:15rem"> <div class="flex align-items-center"> <p-columnFilter field="role" matchMode="in" [showMenu]="false"> <ng-template pTemplate="filter" let-filter="filterCallback"> <p-multiSelect [(ngModel)]="selectedRoles" [options]="roles" placeholder="Any" (onChange)="filter($event.value)" > </p-multiSelect> </ng-template> </p-columnFilter> </div> </th> <th style="min-width:10rem"> <div class="flex align-items-center"> <p-columnFilter field="gender" matchMode="in" [showMenu]="false"> <ng-template pTemplate="filter" let-filter="filterCallback"> <p-dropdown [(ngModel)]="selectedGender" [options]="genders" placeholder="Any" (onChange)="filter($event.value)" > </p-dropdown> </ng-template> </p-columnFilter> </div> </th> </tr> </ng-template> <ng-template pTemplate="body" let-voter> <tr> <td> {{ voter.firstName }} </td> <td> {{ voter.lastName }} </td> <td> {{ voter.email }} </td> <td> {{ voter.voterAffiliation }} </td> <td> {{ voter.supporterRole }} </td> <td> {{ voter.gender }} </td> </tr> </ng-template> <ng-template pTemplate="emptymessage"> <tr> <td colspan="6">No voters found.</td> </tr> </ng-template> </p-table> </div> </div> </div> 组件代码： import { VoterServiceService } from './../services/voter-service.service'; import { Component, inject, OnInit } from '@angular/core'; import { SUPPORT_ROLE, Voter, VOTER_AFFILIATION } from '../data/data.schema'; import { Table, TableModule } from 'primeng/table'; import { MultiSelect, MultiSelectChangeEvent } from 'primeng/multiselect'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-search-voters', standalone: true, imports:[TableModule, MultiSelect,CommonModule,FormsModule], templateUrl: './search-voters.component.html', styleUrl: './search-voters.component.css' }) export class SearchVotersComponent implements OnInit { selectedAffils: string[] selectedRoles: string[] selectedGender: string; voter: Voter | undefined; layout: string = 'list' voters!: Voter[] | undefined; genders: string[] | undefined; roles: string[] | undefined; affiliations: string[] | undefined; private voterServiceService = inject(VoterServiceService); searchValue:string | undefined; loading:boolean; ngOnInit(): void { this.voters = this.voterServiceService.getVoters(); this.genders = [ 'Male' , 'Female', ]; this.roles = [ SUPPORT_ROLE.CLUSTER_SUPERVISOR , SUPPORT_ROLE.PD_CAPTAIN , SUPPORT_ROLE.INDOOR_AGENT , SUPPORT_ROLE.OUTDOOR_AGENT , SUPPORT_ROLE.COUNCILLOR , SUPPORT_ROLE.MINISTER_OF_PARLIAMENT , SUPPORT_ROLE.RUNNER , SUPPORT_ROLE.DRIVER , ]; this.affiliations = [ VOTER_AFFILIATION.JLP, VOTER_AFFILIATION.PNP, VOTER_AFFILIATION.NK, VOTER_AFFILIATION.DEAD, ]; } viewSelect(select : MultiSelectChangeEvent){ console.log(select) } clear(table:Table){ table.clear(); this.selectedAffils = [] this.selectedGender = '' this.selectedRoles = [] } getEventValue(e: Event ){ return (e.target as HTMLInputElement).value } } 内容正在呈现，但输入搜索功能正在正常工作。我的问题是使用多选和下拉列表进行列过滤。以前我尝试按照文档的方法来实现这一点： <p-columnFilter field="status" matchMode="equals" [showMenu]="false"> <ng-template pTemplate="filter" let-value let-filter="filterCallback"> <p-dropdown [(ngModel)]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Select One" [showClear]="true"> </p-dropdown> </ng-template> </p-columnFilter> 利用 ngmodel 指令上的值会导致 无法在双向绑定表达式中使用非信号变量“值”。模板变量是只读的。ngtsc(-99)代码中出现错误。不确定可能是什么问题。一些帮助将不胜感激。 尝试将 [(ngModel)]='value' 更改为单向类绑定，[ngModel]='value'。 这是只读的，应该可以解决您的问题。

PrimeNG 波纹效应在 Angular 中不起作用

我在使用 PrimeNG 的 Angular 应用程序中无法获得连锁反应。尽管遵循了文档和各种教程，连锁反应似乎并没有激活...

如何在全局HttpInterceptor中使用Prime NG messageService？

我目前正在尝试使用 PrimeNG 9 messageService 和 Angular 8 HttpInterceptor 在我的应用程序中实现全局错误处理程序。我的代码如下： 应用程序组件.html //.... 我目前正在尝试使用 PrimeNG 9 messageService 和 Angular 8 HttpInterceptor 在我的应用程序中实现全局错误处理程序。我的代码如下： app.component.html //.... <p-toast key="notification" position="top-right"></p-toast> app.module.ts providers: [ ... { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true, }, ... 错误拦截器.interceptor.ts import { Injectable, ɵConsole } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; import { MessageService } from 'primeng/api'; import { Router } from '@angular/router'; @Injectable({ providedIn: 'root' }) export class ErrorInterceptor implements HttpInterceptor { constructor( private messageService: MessageService, private router: Router ) {} public intercept(httpRequest: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>> { if (httpRequest.method !== 'GET') return next.handle(httpRequest); else { return next.handle(httpRequest).pipe( catchError( (err: HttpErrorResponse) => { console.log(err) this.messageService.add({ key: 'notification', severity: 'error', summary: 'Woops! There was an error!', }); return throwError(err); }) ); } } 拦截器成功捕获错误并将其打印在控制台中。但是，吐司永远不会显示。我还指出，我在其他组件中使用了 messageService 并且 toast 正确显示，它只是在拦截器中不起作用。 您已声明并要求在所需位置领取烤面包机吗？ 例如。在 x-page.module 中，您需要声明烤面包机/函数/无论在哪里，并在 x-page.ts 中调用它 添加到app.module中的“deps”数组 { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true, deps: [AuthService, MessageService], } 如果有人仍在 Angular 17 中寻找此功能，只需在 ApplicationConfig 中添加 MessageService

PrimeNg Tree 将自定义属性添加到 TreeNode [Angular5]

我想向 PrimeNg 树角度的 TreeNode 添加自定义属性，例如： TreeNode.id =“DemoId”，但它给我错误“id”是 TreeNode 的未知属性。 所以我想知道什么是正确的...

出现错误，Null 不可分配给 String 类型 |角度未定义

我的代码有问题，是一个 POS，我正在尝试执行销售部分，但这个错误让我困扰了好几天，我不知道如何修复它。 X [错误] NG2：键入“字符串|” null' 不是

更改 PrimeNG 面板上的打开/关闭图标？

我正在尝试更改 Angular PrimeNG 面板组件上的打开/关闭图标。目前它是一个加号/减号，我需要将其更改为 V 形向上/V 形向下图标。我找到了如何添加电子...

Primeng p-日历与父级尺寸相同

我正在使用表树中的primeng中的p日历。如何使 p-calendar 字段与其所在的单元格大小相同？或者更一般地说 - 我怎样才能使其大小与父 div 相同？ 你可以

Primeng表格虚拟滚动标题向上滚动时跳跃

我有大量数据需要虚拟滚动，我使用 PrimeNg v13.4.0 和 Angular/cdk v13.3.7。我在 PrimeNg 演示中遇到了完全相同的问题。向下滚动时，粘性标题会...

如何更改 prime ng Angular 中 p 时间线中连接器的颜色

如何改变颜色 p 时间线中的连接器处于 prime ng 角度。 在 prime ng 文档中，他们刚刚提供了内容、标记和相反的模板。 我想动态地...

从 Angular 17 中的 PrimeNG 时间线中删除 p-timeline-event-opposite 空间

我正在使用 PrimeNG 时间线模块来显示几个简单的水平时间线，其内容位于表格的顶部。如何删除 .p-timeline-event-opp 占用的空间...

如果“p-dropdown”是一个 Angular 组件并且它具有“showClear”输入，则验证它是否是该模块的一部分

我正在尝试在 azure 管道中运行 npm run build，但在 primeng 组件上出现错误 如果“p-dropdown”是 Angular 组件并且具有“showClear”输入，则验证它是否是

PrimeNG，InputOtp无法更改已填充输入的值

我使用 PrimeNG 的 p-inputOtp 组件进行 OTP 输入。我注意到我可以更改值，直到填满四分之三的框，但是一旦填满所有四个框，我就无法修改...

Angular 8 到 17 升级：ngModel 绑定和 PrimeNG 组件问题

我正在将 Angular 8 应用程序升级到 Angular 17，并遇到了 ngModel 绑定和 PrimeNG 组件的问题。我的应用程序使用基于模块的结构，以 app.module.ts 作为主要

防止默认值在 p-tabView 中不起作用

我在 Angular 应用程序中使用 PrimeNG 的 p-tabView 来管理多个选项卡。我想防止选项卡在某些情况下发生更改。我尝试在 onC 中使用 PreventDefault 方法...

如何通过手风琴上的按钮控制打开 primeng 手风琴内容

我想使用放置在其自定义标题中的按钮打开 primeng 手风琴，并且如果我单击其他任何地方，我不希望打开手风琴。我正在使用 primeng 11-lts 版本，这是...

向 PrimeNG FileUpload 数据传输添加附加信息

我希望发送使用 primeng fileupload 组件上传的文件的附加信息。基本上，我需要知道这些上传的文件与什么相关。 我可以添加

如何自定义Toast窗口的样式？

窗口的默认大小非常小，我希望能够调整它，因为我的吐司消息可能会很长。我还需要能够自定义......的风格

primeNG TabView 不会在Init 上显示内容

我的 primeNG 组件 TabView 有问题。我正在尝试构建一个以 primeNG 作为基础的自定义库。因此，我实现了一个选项卡组件和一个选项卡项组件 在我的第一次尝试中，...

即使严重性已更改，p 按钮也不会更改

我有一个p-轮播，里面有一批词汇卡，每张都有一个单选题，用户必须为该单词选择正确的翻译答案，然后轮播会自动切换...

使用现有数据初始化 primeng 编辑器组件

嗨，这是我的编辑器 editor.component.html，我正在其中使用 primeng 编辑器。我以一种允许在创建会议或编辑会议时填充此编辑器的形式使用它。如果是cre...