primeng 相关问题

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'}]

在卡片内使用CSS定位元素

我对卡片中元素的定位有疑问。我希望“右上角元素”类中的元素放置在右上角，而按钮带有...

prime-ng DynamicDialog 页脚中的自定义按钮

PrimeNG，Angular 17。 我在 DynamicDialog 页脚模板上有一个自定义按钮“更改状态”。对话框运行良好，按钮事件正在页脚模板上运行。不过，我想转发...

如何从角度调整元素的宽度：“p-multiselect”，使其始终与最宽的“li”元素一样宽？

我需要以下角度元素的帮助。 我无法使用以下 p-multiSelect 设置自动宽度。我还上传了图片，你可以看到，一些“li”元素比 p-multi 更宽......

PrimeNG 与 KendoUI for Angular - 技术方面 [已关闭]

在回顾决定选择一个 UI 库而不是另一个 UI 库的主要技术点时，在本例中是 PrimeNG 和 KendoUI for Angular，你们中的任何人是否有机会客观地分析

新的 Angular v17 项目 - PrimeNG 与 KendoUI

我需要您的帮助来为我的 Angular v17 项目选择最佳的 UI 库。 我来自一个使用 AngularJs 和 AngularJs-Bootstrap 组件的旧项目。 我看到了

无法在 Angular 12.1.4 上安装 PrimeNg。 npm 错误

我正在尝试将 PrimeNg 添加到我的项目中，但是，我收到这个奇怪的错误，我不知道如何修复它。谁能帮我吗？我的机器中当前安装的 Angular 版本是 12.1.4。 20...

Angular v10：我如何处理 p-calendar 的重叠问题

覆盖超出视口 如何防止覆盖超出浏览器的视口 覆盖层应从上到下完全显示在屏幕上 感谢您的帮助和帮助...