primeng 相关问题

使用此标记可以获得有关PrimeNG的问题，PrimeNG是Angular的UI组件集合。标记为[primeng]的问题也应标记为[angular]，但不是[primefaces]。

表格的工作原理：标题填充、行填充数据、列排序。单行选择不起作用。 p表：表格的工作原理：标题填充、行填充数据、列排序。单行选择不起作用。 p-表： <p-table [value]="releases" [columns]="headers" responsiveLayout="scroll" [paginator]="true" [rows]="pageRows" dataKey="index" (onRowSelect)="onRowSelect($event)" selectionMode="single" [(selection)]="selectedRelease" [resizableColumns]="true" sortMode="multiple"> 行选择： // onRowSelect method onRowSelect(event: any) { this.messageService.add({ severity: 'info', summary: 'Release Selected', detail: event.data.name }); } 该函数被调用，但在消息调用处中断时，event.data 和 event.index 未定义。这在 Angular/PrimeNG 升级之前有效。 Angular 17.3，PrimeNG 17.16.1。谢谢大家的意见我省略了主体模板上的迭代器变量。我有 <ng-template pTemplate="body" let-release> <tr [pSelectableRow]> 我需要的地方 <ng-template pTemplate="body" let-release> <tr [pSelectableRow] = "release"> 我应该在这个问题上放置更多的 p 表代码。这在框架升级之前确实有效。我因为其他原因编辑了一下，介绍一下这个。还是谢谢啦

primeng primeng-table

回答 1 投票 0

带有 PrimeNg 的 Angular 库抛出错误（'firstCreatePass'）

对于当前项目，我正在致力于将 Angular 应用程序与基于 PrimeNg 的自定义 UI（Angular 库）集成。我像往常一样使用 PrimeNg，如下所示： // mac-login.html...

angular typescript primeng pnpm-workspace

回答 1 投票 0

“object-fit: contains”在 PrimeNg p-image 中不起作用

CSS“object-fit: contains”在 PrimeNg p-image 组件中不起作用。 CSS“object-fit: contains”在 PrimeNg p-image 组件中不起作用。 <p-image [src]="image" alt="Image" appendTo="body" height="550vw" width="100%" style="object-fit: contain"></p-image> 有什么我错过的吗？也用不同的方式尝试了相同的结果： [style]="{ objectFit: 'contain' }" 您是否尝试过imageStyle，它作为文档中实际图像样式的选项给出 - PrimeNg Image Api Tab。 <div class="card flex justify-content-center"> <p-image [src]="'https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg'" alt="Image" appendTo="body" height="550vw" width="100%" [imageStyle]="{objectFit: 'contain'}" ></p-image> </div>

css image primeng

回答 1 投票 0

CSS“object-fit：包含”在 PrimeNg p-image 中不起作用

image primeng

回答 1 投票 0

如果我单击另一个组件并返回，p-checkbox 不会保持其选中值 [ 角度 16.2.1]

我正在使用 AngularTS 和 primeNG。下面是我的 html p-checkbox 代码，我还有 rowEdit on row Click 功能以及额外的此代码，所以当我进行编辑模式并返回此此。

angular checkbox primeng checked ng-modal

回答 1 投票 0

如何将 aria-dialog-name 属性添加到 PrimeNg 动态对话框？

我正在使用 primeng 动态对话框，如下所示：私有对话服务：DialogService ... ... this.dialogService.open(MyComponent, { 显示标题：假，模态：真实， autoZIndex：真，数据：...

javascript angular primeng

回答 1 投票 0

Angular PrimeNG p-table：向特定列添加自定义排序功能

我正在使用PrimeNG的p表。该表当前在两列上默认排序，但第三列数据应该按状态（高、中、低）排序。现在我需要实现排序...

angular primeng primeng-datatable

回答 1 投票 0

有角度的 PrimeNg <p-multiselect> 带装载机

我正在primeng中动态加载数据。当用户搜索数据并且加载选项数组时，它工作得很好。我想要的只是能够显示加载程序图标而不是搜索...

angular primeng

回答 1 投票 0

Angular：如何在 PrimeNG p-steps 组件中设置已完成步骤的样式？

我正在尝试使用 PrimeNG 中的 p-steps 组件。我想为已完成和未完成的步骤设置不同的样式。也就是说，如果用户当前处于步骤 3，则步骤 1 和 2 是

angular primeng

回答 2 投票 0

如何使用 headercheckboxicon 和 checkboxicon 模板 primeng 复选框选择

如何在primeng表复选框选择中使用headercheckboxicon和checkboxicon模板我只是按照 primeng 表文档并使用下面的代码如何在primeng表复选框选择中使用headercheckboxicon和checkboxicon模板我只是按照 primeng 表文档并使用下面的代码 <div class="card"> <p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [tableStyle]="{'min-width': '50rem'}" > <ng-template pTemplate="checkboxicon"> <p-checkbox label="Cheese"></p-checkbox> </ng-template> <ng-template pTemplate="headercheckboxicon"> <p-checkbox label="Header"></p-checkbox> </ng-template> <ng-template pTemplate="header"> <tr> <th style="width: 4rem"> <p-tableHeaderCheckbox></p-tableHeaderCheckbox> </th> <th>Code</th> <th>Name</th> <th>Category</th> <th>Quantity</th> </tr> </ng-template> <ng-template pTemplate="body" let-product> <tr> <td> <p-tableCheckbox [value]="product"></p-tableCheckbox> </td> <td>{{product.code}}</td> <td>{{product.name}}</td> <td>{{product.category}}</td> <td>{{product.quantity}}</td> </tr> </ng-template> </p-table> </div> 提前致谢您是否使用 PrimeNG 版本 14 或更低版本？如果是这样，则模板尚未引入，您必须升级 PrimeNG 或添加您自己的组件，并将其映射到表中。如果您想了解实际情况，可以在此处查看代码：https://github.com/primefaces/primeng/blob/master/src/app/components/table/table.ts

javascript angular primeng primeng-datatable primeng-table

回答 1 投票 0

Primeng 使可滚动数据表高度响应

PrimeNG DataTable 提供了一个 [scrollable] 属性来定义垂直和/或水平滚动。这必须与设置的scrollHeight和/或scrollWidth的组合一起使用。我怎样才能拥有...

css angular primeng primeng-datatable

回答 9 投票 0

如何使用 headercheckboxicon 和 checkboxicon 模板来启动复选框选择

javascript angular primeng primeng-datatable primeng-table

回答 1 投票 0

Prime-ng 多选过滤器占位符不显示

我正在使用 Prime ng 多选并将属性过滤器设置为 true 并添加 filterPlaceholder 属性，如下所示。我正在使用 Prime ng 多选并将属性过滤器设置为 true，并添加 filterPlaceholder 属性，如下所示。 <p-multiSelect [options]="cities1" [(ngModel)]="selectedCities1" filter="true" filterPlaceHolder="Search..." defaultLabel="example" > </p-multiSelect> 我没有在多选中获得过滤器占位符。请帮忙。您需要编写 [filterPlaceholder]="'Search...'"，这样您就可以将 Search... 作为字符串传递到 filterPlaceholder 中 filterPlaceholder="value" - 它的硬编码值 [filterPlaceholder]="value" 或 filterPlaceholder="{{ value }}" 这里的值是变量，具有 ts 文件中的某个值您可能遇到另一个问题：如果有错误，请在控制台中发送错误。在所有多属性属性中使用 []。 [filterPlaceholder]="value" 或 [filterPlaceholder]="'value'" 是true。可在此处获取这些属性的列表。请尝试 [filterPlaceholder]="'Search...'"

angular primeng

回答 4 投票 0

如何将 PrimeNG 文件上传组件绑定到我的 Angular 表单控件？

我正在使用 Angular 13 和 PrimeNG。我有这个文件上传组件 ... 我正在使用 Angular 13 和 PrimeNG。我有这个文件上传组件 <form [formGroup]="form" > ... <p-fileUpload [customUpload]="true" (uploadHandler)="uploadFile($event)" [multiple]="false" formControlName="myFile"></p-fileUpload> 如何将其绑定到我的表单的表单控件？我的服务文件中有这个 form: FormGroup; ... this.form = this.fb.group({ ... myFile: [null], }); save(){ ... const formData = new FormData(); const myObject = this.form.value; ... console.log("file:" + myObject.myFile); 但即使当我上传文件时，我也会反复看到“file: null”输出，并且没有文件绑定到我的表单控件。将我的 p-fileupload 值绑定到表单控件的正确方法是什么？发生该错误是因为您设置了方法 save() 来获取 console.log。当您使用 customUpload 并且您想通过单击按钮获取文件时，您可以使用 Angular 中的 @ViewChild 方法。查看代码，您将了解它是如何工作的。首先给你的fileUpload一个像#fileUpload这样的id，你不需要在这里设置formControlName。相反，您可以在 new FormControl 中设置 formBuilder group。 <form [formGroup]="form"> <p-fileUpload #fileUpload [customUpload]="true" (uploadHandler)="uploadFile($event)" ></p-fileUpload> </form> <button (click)="save()">save</button> 然后在您的 .ts 文件中，您必须导入 @ViewChild 方法并查看 FileUpload。在 uploadFile 事件中我们可以获取文件并使用 patchValue 方法我们可以设置表单字段的值。 export class AppComponent implements OnInit { @ViewChild('fileUpload') fileUpload: FileUpload; form: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.form = this.fb.group({ myFile: new FormControl(), }); } uploadFile(event) { for (let file of event.files) { this.form.patchValue({ myFile: file }); this.form.get('myFile').updateValueAndValidity(); } } save(){ this.fileUpload.upload(); console.log(this.form.value.myFile) } } 演示：stackblitz 您可以创建自定义 ControlValueAccessor 指令，以便自动将上传的文件绑定到表单控件。模板： <p-fileUpload formControlName="abcFile"></p-fileUpload> 指令： import { Directive, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { FileUpload } from 'primeng/fileupload'; @Directive({ selector: 'p-fileUpload[formControlName], p-fileUpload[formControl]', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FileUploadControlValueAccessorDirective), multi: true, }, ], }) export class FileUploadControlValueAccessorDirective implements ControlValueAccessor { constructor(private fileUpload: FileUpload) {} writeValue(value: any): void { // update the model and changes logic goes here } registerOnChange(fn: any): void { // notify the outside world about changes (when the user interacts with the input) this.fileUpload.onUpload.subscribe(fn); } registerOnTouched(fn: any): void { // here goes the touch logic this.fileUpload.onClear.subscribe(fn); } setDisabledState(isDisabled: boolean) { this.fileUpload.disabled = isDisabled; } } 🌮Stackblitz在这里🌮 我无法真正让 Meqwz 解决方案发挥作用，但它启发了我这个解决方案： export class FileUploadControlValueAccessorDirective implements ControlValueAccessor, OnDestroy { #fileUpload = inject(FileUpload); #ngUnsubscribe = new Subject<void>(); writeValue(_: File[]): void { // this handles the use of form.reset() if (!files.length) { this.#fileUpload.clear(); } } registerOnChange(fn: any): void { this.#fileUpload.uploadHandler.pipe( map(event => event.files), takeUntil(this.#ngUnsubscribe) ).subscribe(files => fn(files)); this.#fileUpload.onRemove.pipe( takeUntil(this.#ngUnsubscribe) ).subscribe(() => fn(this.#fileUpload.files)); } registerOnTouched(_fn: never): void { // nothing to do } setDisabledState(isDisabled: boolean) { this.#fileUpload.disabled = isDisabled; } ngOnDestroy(): void { this.#ngUnsubscribe.next(); this.#ngUnsubscribe.complete(); } } 我获得了 FileUpload 指令所在的 formControlName 组件，并且订阅了我需要的不同事件。试试这个 <form [formGroup]="form" > ... <p-fileUpload [customUpload]="true" name="file-upload" (uploadHandler)="uploadFile($event)" [multiple]="false" formControlName="myFile"></p-fileUpload> 你的表格组应该是 form: FormGroup = new FormGroup({}); ... this.form = this.fb.group({ ... myFile: new FormControl(''), }); save(){ ... const myObject = this.form.value; ... console.log("file:", myObject.myFile) // do not use + operator, because it converts object to string as [Object Object] and it causes the confusion. 希望这有帮助:)

angular file-upload primeng angular13 form-control

回答 4 投票 0

如何在 PrimeNG 下拉列表中应用 z 索引

我正在使用 Angular 18 和 PrimeNG。我有一个 PrimeNG 下拉列表，在视觉上被 PrimeNG 表页脚剪切。我尝试在各种 p-dropdown css 类上应用更高的 z-index，...

css angular typescript primeng

回答 1 投票 0

Angular PrimeNG TabMenu 在同一项目上重新加载

我想知道如何手动重新加载 PrimeNG 的活动菜单项。我知道有办法手动重新加载当前组件，但我想知道 Pri 是否实现了任何方法...

html angular angular-ui-router primeng

回答 1 投票 0

如何更改PrimeNG 18中`p-card`组件的背景颜色？

我正在尝试更改p卡组件容器的背景颜色。对于上下文，我强制更改 primeng 组件中的一些样式，只是为了看看我是否能够...