primeng 相关问题

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 }) 解决了我的问题

Angular 创建动态组件断言错误

我遇到一种情况，我需要动态创建要在 Angular/PrimeNG 选项卡中显示的组件。 应用程序启动时未定义选项卡。选项卡的内容取决于...

如何使用自定义输入事件primeng angular

我有一个 Angular 16 项目 我有一个数字输入，使用 formControls 进行验证 因为我们经常使用此输入，所以我将其放入自定义组件中以使我的工作更轻松。 我用primeng

与 p-carousel PrimeNG 对齐错误

我正在使用 Angular PrimeNG 编写一些代码，但在使用 p-carousel 时遇到了问题。问题是，正如你所看到的，标题没有很好地居中对齐，比它需要的位置稍微高了一点。

如何在 ng-template 中获取 primeng 下拉列表的索引值

我正在尝试在 ng-template 中获取 primeng 下拉列表的索引值，但它给了我空值。这是示例代码 我正在尝试在 ng-template 中获取 primeng 下拉列表的索引值，但它给了我空值。这是示例代码 <p-dropdown [options]="cards" [(ngModel)]="selectedCard"> <ng-template let-card let-i="index" pTemplate="item"> <span>{{i}}</span> </ng-template> </p-dropdown> 如果您检查 primeng source 代码，您会发现传递了传递选项的项目，因此没有有关索引的信息 <ng-container *ngTemplateOutlet="template; context: {$implicit: option}"></ng-container> 一种方法是创建一个管道来查找传递选项的索引基 @Pipe({ name: 'indexOf' }) export class IndexOfPipe implements PipeTransform { transform(items:any[] , item:any): any { return items.indexOf(item); } } 示例 <p-dropdown [options]="cities" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" [showClear]="true" placeholder="Select a Country"> <ng-template let-item pTemplate="item"> <div>🔹{{item.value.name}} {{cities | indexOf:item.value}} </div> </ng-template> </p-dropdown> 演示🚀🚀 你可以尝试<span>{{cards.indexOf(card)}}</span>。 我认为 ng-template 中的 let-i="index" 在 primeng 9.x 文档中没有提及。 启动索引为rowIndex let-index="rowIndex" 然后使用插值法 {{ index + 1 }} let-idx="index"：https://angular.io/api/common/NgForOf 使用示例： <div class="container"> <ng-template ngFor let-item [ngForOf]="items" let-idx="index"> {{idx}} </ng-template> </div>

Angular 动态组件访问属性

我希望得到一些帮助。 我需要在 PrimeNG 的 TabView 中动态创建一些新选项卡，其中充满了组件。它可以很好地显示所有组件，但是我如何访问

在动态对话框priemng中使用steps组件实现路由

任何人都可以帮助我在 primeng 的动态对话框中实现步骤组件吗？我正在开发一个示例项目，我需要在包含多个的对话框中实现登录屏幕

PrimeNg 菜单栏在更改模型后不会重新渲染

我按照 https://www.primefaces.org/primeng/menubar 中提供的示例创建了一个带有一些菜单项的简单菜单栏。 现在我想更改菜单后一项的可见性...

如何在ngAfterViewInit之后更改PrimeNG的p-card组件的背景？

我想在初始化视图后更新 p 卡（PrimeNG 组件）的背景。 我的真实需求： 我的 p 卡中有一张图像，我想检索图像的主色...

如何使用 Angular 4 Reactive Form 在 PrimeNg MultiSelect 中设置默认选定值？

我正在使用 PrimeNg (PrimeNg Multiselect) 和 Angular4 的 MultiSelect 控件与反应式表单，并且我想在表单加载期间保留一些默认选择的项目。 超文本标记语言 我正在将 PrimeNg (PrimeNg Multiselect) 和 Angular4 的 MultiSelect 控件与反应式表单一起使用，并且我想在表单加载期间保留一些默认选择的项目。 HTML <div class="col-md-4"> <span translate>settings.account.webhook.label.additional.variables</span> <p-multiSelect [options]="sensorsList" (onChange)="changeSensorsList($event)" formControlName="selectedSensorsList" name="selectedSensorsList" [panelStyle]="{minWidth:'20em'}"></p-multiSelect> </div> 这是我的 TypeScript 代码 sensorsList = [ { label: 'lat', value: {'id': 0, 'itemName': 'lat', 'selected': false }}, { label: 'lng', value: {'id': 1, 'itemName': 'lng' , 'selected': false}}, { label: 'address', value: {'id': 2, 'itemName': 'address' , 'selected': false}}, { label: 'origin', value: {'id': 3, 'itemName': 'origin' , 'selected': false}} ]; this.addEditWebhookForm = this._formBuilder.group({ name: [(_webhookToEdit) ? _webhookToEdit['name'] : '', [Validators.required]], selectedSensorsList: [] }); 当您创建selectedSensorsList时，您需要为您的formGroup提供价值： this.addEditWebhookForm = this._formBuilder.group({ ..., selectedSensorsList: [ defaulSensorsList ] }); 或稍后设置该值： this._formBuilder.get('selectedSensorsList').setValue(defaultSenorsList); HTML 您需要在 primeng 组件中设置一个 ngModel <div class="col-md-4"> <span translate>settings.account.webhook.label.additional.variables</span> <p-multiSelect [options]="sensorsList" (onChange)="changeSensorsList($event)" formControlName="selectedSensorsList" name="selectedSensorsList" [panelStyle]="{minWidth:'20em'}" [(ngModel)]="selectedDefault"></p-multiSelect> </div> TS selectedDefault= []; sensorsList.map((item) => selectedDefault.push(item.value)); 在这里我选择了所有这些。 您还必须更新传感器列表对象以将所选值更改为 true 你必须在 ngOnInit 中设置默认选项 selectedSensorsList: [{'id': 0, 'itemName': 'lat'}]