primeng 相关问题

PrimeNG Angular 10 - 如何在 p-autoComplete 中添加图标

有没有办法在primeng p-autoComplete中添加图标？ 有没有办法在primeng p-autoComplete中添加图标？ <div class="p-mr-2 p-input"> <p-autoComplete styleClass="p-autocomplete-list-item" [(ngModel)]="location" [suggestions]="results" field="name" placeholder="Search location"> </p-autoComplete> </div> 我正在寻找一种方法来在此自动完成元素中添加位置图标 PrimeNg 提供了 InputGroup 选项，可用于添加输入图标。 <div class="p-mr-2 p-input"> <div class="p-inputgroup"> <span class="p-inputgroup-addon">$</span> <p-autoComplete styleClass="p-autocomplete-list-item" [(ngModel)]="location [suggestions]="results" field="name" placeholder="Search location"> </p-autoComplete> </div> </div> 在这里而不是$添加所需的位置图标。 有一个 Property “dropdownIcon” 采用默认图标的名称 “pi pi-V 形向下”。 <p-autoComplete [group]="true" field="label" [multiple]="true" [dropdown]="true" dropdownIcon="pi pi-search" > 试试这个；测量结果只是一个例子： <div id="searchGroup" class="inner-inline-group" > <i class="pi pi-search search-icon"></i> <p-autoComplete id="searchInput" [style]="{ width: '98%', position: 'static' }" ></p-autoComplete> </div> 在组件CSS中： .search-icon { z-index: 1; position: relative; left: 41px; top: 9px; align-self: center; } 在全局styles.css中： .p-autocomplete-input { padding-left: 33px; }

想要使用父级的@input装饰器访问变量值

我想使用父级的baseurl，可用于子级的进一步处理 仪表板是父级的 ` 我想使用父级的baseurl，可用于子级的进一步处理 仪表板是父级 `<div class="layout-wrapper" [ngClass]="containerClass"> <app-topbar></app-topbar> <div class="layout-main-container"> <div class="layout-main"> <router-outlet baseurl='MY_API_URL'></router-outlet> </div> <app-footer></app-footer> </div> <app-config></app-config> </div>` 我想要一个设置，因此如果将来我需要更改基本网址，我可以仅从标签更改它 为此，各个孩子的代码如下 export class SpecimenComponent implements OnInit { @Input() baseurl = ''; 在您希望所有子组件具有相同基本 url 的父组件中，创建一个服务，确保它没有 providedIn: 'root' 并将其添加到父组件中，如下所示 @Component({ providers: [UrlService], }) export class ParentComponent { const urlService = inject(UrlService); ngOnInit() { this.urlService.baseUrl = 'http://example.com'; } } 然后导入服务，确保所有子 URL 具有相同的要共享的 URL，据我所知，不可能使用 @Input 或 @Output 作为路由！ 使用providers数组中的服务，我们确保该服务创建了一个新实例，因此只有父级及其子级可以访问您设置的url！

具有反应形式的PrimeNG复选框组 - 如何获取所有选中的值

我有一组元素（PrimeNG），它们都共享 name 属性和 formControlName 属性。表单控件的值是一个数组（应该是这样），但是它“

如何在 Chartjs (PrimeNG) 中为图例添加边距顶部

我的图例位于图表底部，但图表和图例之间的空间太小， 如何为图例、图表添加边距或填充？ 这是我的饼图选项，我有广告...

p-table primeng 编辑与反应形式

我使用primeng的反应式表格组件创建了一个表格。 任务表只有一列包含任务名称，并且可以编辑。 当点击编辑图标并输入...

FormData 不以角度追加文件

我正在尝试使用 FormData 上传文件，以便可以通过 HTTP 请求发送。这是我的 HTML 代码 我正在尝试使用 FormData 上传文件，以便可以通过 HTTP 请求发送。这是我的 HTML 代码 <ng-template #displayApp> <div class="display flex justify-content-center"> <div > <p-fileUpload chooseLabel="Select First File" [showUploadButton]="false" [showCancelButton]="false" (onSelect)="checkFilesSelected()" (onRemove)="checkFilesSelected()" #originalFile> </p-fileUpload> </div> <div style="margin: 0 20px;"></div> <div > <p-fileUpload chooseLabel="Select Second File" [showUploadButton]="false" [showCancelButton]="false" (onSelect)="checkFilesSelected()" (onRemove)="checkFilesSelected()" #revisedFile> </p-fileUpload> </div> </div> <div style="margin-bottom: 20px;"> </div> <div class="display flex justify-content-center"> <p-button [disabled]="!areFilesSelected" (click)="onUpload()">Compare Files</p-button> </div> </ng-template> 我正在选择两个文件并尝试在一次调用中上传这两个文件，以便它们彼此同步。 这是我的组件 TS 文件。 @ViewChild('firstFile') firstFile!: FileUpload; @ViewChild('secondFile') secondFile!: FileUpload; onUpload() { console.log("File upload called",); const originalFiles: File = this.originalFile.files[0] const revisedFiles: File[] = this.revisedFile.files; let formData: FormData = new FormData(); console.log("First ",originalFiles, originalFiles.name) debugger; formData.append('First', originalFiles) console.log("Form Data ", formData) let uploadUrl = new URL('baseURL'); uploadUrl.searchParams.append('First',"first"); uploadUrl.searchParams.append('Second',"second"); this.http.post(uploadUrl.toString(), formData).subscribe( response => { console.log('File uploaded successfully:', response); }, error => { console.error('Error uploading file:', error); } ); } 我可以看到 originalFiles 正在填充文件详细信息。但是当我将其附加到 formData 时，它不会被附加，也不会引发任何异常。当我在控制台上看到 formData 时，它是空的。 有这方面的帮助吗？ 我尝试将该数据类型更改为 File 而不是 FileUpload，但结果无论如何都不起作用。如果我们使用 event.Files[0] 那么它就可以很好地附加文件。我不知道如何将此事件合并为单个事件，以便我可以上传文件。 要以角度形式使用表单数据，必须设置 enctype 标头，并且要检查 FormData 中存在的值，条目 method 确实有效。 onUpload() { console.log("File upload called"); const originalFiles: File = this.originalFile.files[0] const revisedFiles: File[] = this.revisedFile.files; let formData: FormData = new FormData(); formData.append('First', originalFiles); // log each entry in the formData for (const [key, value] of formData.entries()) { console.log(`${key}: ${value}`); } let uploadUrl = new URL('baseURL'); uploadUrl.searchParams.append('First', "first"); uploadUrl.searchParams.append('Second', "second"); const headers = new HttpHeaders({ 'enctype': 'multipart/form-data' }); this.http.post(uploadUrl.toString(), formData, { headers: headers }).subscribe( response => { console.log('File uploaded successfully:', response); }, error => { console.error('Error uploading file:', error); } ); }

如何为 PrimeNG TabView 创建自定义选项卡滑块动画？

我正在尝试为 PrimeNG TabView 创建自定义底部边框滑块。 Angular Material 具有开箱即用的功能，但 PrimeNG 没有。 动画应该是一个简单的边框底部幻灯片，来自...

错误：NgModule 'ApprovalModule' 需要使用 JIT 编译器进行编译，但 '@angular/compiler' 不可用

错误错误：未捕获（承诺中）：错误：NgModule“ApprovalModule”需要使用 JIT 编译器进行编译，但“@angular/compiler”不可用。 不鼓励 JIT 编译

PrimeNG TreeSelect：编程选择不会传播

使用鼠标单击在基于复选框的树选择中选择节点时，默认行为是将选择传播到树上，以便选择或部分选择祖先，如

Prime ng：以编程方式调整 p-splitter 中存在的 p-accordion 的大小

请参阅下面我的组件代码： 我有一个 p 分配器，它分为 3 个部分。 我在每个部分都有一个 p-手风琴，而它又有一个 p-表。 ... 请参阅下面我的组件代码： 我有一个 p 分离器，它被分成 3 个部分。 我在每个部分都有一个 p-手风琴，而它又具有一个 p-表。 <div class="card w-full"> <p-splitter [panelSizes]="[30, 40, 30]" styleClass="mb-5"> <ng-template pTemplate> <p-accordion [activeIndex]="0" styleClass="h-full"> <p-accordionTab header="Signed PDF Documents"> <div class="flex justify-content-between"> <div> <h6>Proposal PDF Documents</h6> </div> <div><a>Add Attachment(s)</a></div> </div> <ng-template pTemplate> <p-table [value]="documentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="name">Attachment Name <p-sortIcon field="name"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.name }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" > <p-accordionTab header="Papervision Documents"> <div class="flex justify-content-between"> <div> <h6>Scanned Contract Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="paperDocumentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="number">Customer Number <p-sortIcon field="number"></p-sortIcon> </th> <th pSortableColumn="name">Customer Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="type">Doc Type <p-sortIcon field="type"></p-sortIcon> </th> <th pSortableColumn="docNumber">Doc Number <p-sortIcon field="docNumber"></p-sortIcon> </th> <th pSortableColumn="docDate">Doc Date <p-sortIcon field="docDate"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.number }}</a></td> <td>{{ doc.name }}</td> <td>{{ doc.type }}</td> <td>{{ doc.docNumber }}</td> <td>{{ doc.docDate }}</td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" class="w-100"> <p-accordionTab header="Docusign Documents"> <div class="flex justify-content-between"> <div> <h6>Docusign Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="docusignDocumentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="name">Document Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="number">Doc Id <p-sortIcon field="number"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td>{{ doc.name }}</td> <td><a>{{ doc.number }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> </p-splitter> </div> 我这里有两个问题需要解决： 如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。 （这3个手风琴的最大尺寸） 怎样才能让分离器不重新调整大小？目前用户可以重新调整分离器的大小。如果我想阻止它，我该如何实现呢？ 感谢您的阅读，如有任何帮助，我们将不胜感激！ 致以最诚挚的问候， 尼丁阿乌拉。 通常组件 CSS 的作用域仅限于组件内部，我们可以使用 ::ng-deep 来覆盖此行为，并且 CSS 在组件外部可见！ 如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。 （这3个手风琴的最大尺寸） 我只是添加下面的 CSS 以确保完整高度传播到手风琴的所有元素，我使用类 custom-accordion 来确保 CSS 仅限于手风琴本身！ HTML ... <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> ... CSS ::ng-deep .custom-accordion .p-accordion-content { height: calc(100% - 54px) !important; } ::ng-deep .custom-accordion .p-toggleable-content, ::ng-deep .custom-accordion .p-accordion-tab, ::ng-deep .custom-accordion p-accordiontab, ::ng-deep .custom-accordion .p-accordion { height:100% !important; } 怎样才能让分离器不重新调整大小？目前用户可以重新调整分离器的大小。如果我想阻止它，我该如何实现呢？ 我不知道为什么你需要一个调整大小的元素，当不需要调整大小时，你可以对flexbox做同样的事情，如果你想这样做，你可以引用bootstrap grids中的CSS！ 为了实现你想要的，我们可以使用类 p-splitter-gutter 隐藏调整大小栏，我使用类 no-resize 将其范围限定到手风琴级别。 HTML <button (click)="noResize = !noResize">toggle Resize</button> {{noResize}} <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> ... CSS /* disable the resize */ ::ng-deep .no-resize .p-splitter-gutter { display: none !important; } 完整代码 TS import { Component } from '@angular/core'; import { ImportsModule } from './imports'; @Component({ selector: 'splitter-horizontal-demo', templateUrl: './splitter-horizontal-demo.html', standalone: true, imports: [ImportsModule], styles: [ ` ::ng-deep .custom-accordion .p-accordion-content { height: calc(100% - 54px) !important; } ::ng-deep .custom-accordion .p-toggleable-content, ::ng-deep .custom-accordion .p-accordion-tab, ::ng-deep .custom-accordion p-accordiontab, ::ng-deep .custom-accordion .p-accordion { height:100% !important; } /* disable the resize */ ::ng-deep .no-resize .p-splitter-gutter { display: none !important; } `, ], }) export class SplitterHorizontalDemo { noResize = false; documentList = [ { name: 'test' }, { name: 'test1' }, { name: 'test2' }, { name: 'test3' }, { name: 'test4' }, { name: 'test5' }, { name: 'test6' }, ]; paperDocumentList = [ { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, ]; docusignDocumentList = [ { name: 'test', number: 'test', }, ]; noAction(event: any) { event.preventDefault(); return false; } } HTML <button (click)="noResize = !noResize">toggle Resize</button> {{noResize}} <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> <p-splitter [panelSizes]="[30, 40, 30]" styleClass="mb-5" (onResizeEnd)="noAction($event)" (onResizeStart)="noAction($event)" > <ng-template pTemplate> <p-accordion [activeIndex]="0" styleClass="h-full"> <p-accordionTab header="Signed PDF Documents"> <div class="flex justify-content-between"> <div> <h6>Proposal PDF Documents</h6> </div> <div><a>Add Attachment(s)</a></div> </div> <ng-template pTemplate> <p-table [value]="documentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="name"> Attachment Name <p-sortIcon field="name"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.name }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0"> <p-accordionTab header="Papervision Documents"> <div class="flex justify-content-between"> <div> <h6>Scanned Contract Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="paperDocumentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="number"> Customer Number <p-sortIcon field="number"></p-sortIcon> </th> <th pSortableColumn="name"> Customer Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="type"> Doc Type <p-sortIcon field="type"></p-sortIcon> </th> <th pSortableColumn="docNumber"> Doc Number <p-sortIcon field="docNumber"></p-sortIcon> </th> <th pSortableColumn="docDate"> Doc Date <p-sortIcon field="docDate"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.number }}</a></td> <td>{{ doc.name }}</td> <td>{{ doc.type }}</td> <td>{{ doc.docNumber }}</td> <td>{{ doc.docDate }}</td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" class="w-100"> <p-accordionTab header="Docusign Documents"> <div class="flex justify-content-between"> <div> <h6>Docusign Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="docusignDocumentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="name"> Document Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="number"> Doc Id <p-sortIcon field="number"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td>{{ doc.name }}</td> <td><a>{{ doc.number }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> </p-splitter> </div> Stackblitz 演示

Primeng 分页器 rowsPerPageOption 支持“全部”

我想知道是否有一个等效的解决方案（在primeng中）可以为rowsPerPageOptions提供“全部”选项。目前解决这个问题的唯一方法是添加一个非常大的数字，但这并不理想\

Primeng 17 和 Bootstrap 5

可以在 Angular 17 项目中使用 primeng ^17.6.0 和 bootstrap ^5.3.2 吗？我想对我的应用程序的公共部分使用 bootstrap，但是我想有一个管理部分......

如何为 PrimeNG 下拉列表设置可见/不可见的组项目？

当我单击组标题时，如果组中有项目，我想使组项目可见/不可见。 是否可以？ 例如，我想在下拉列表中看到 3 个项目（AA、BB、CC），前 2 个选项（AA 和 BB）

PrimeNG 输入数字与自定义数字格式化程序

我正在使用 PrimeNG 在 Angular 中设置一个表单，并且尝试将 元素的值格式化为使用以下格式 XXX.XXXX'XX，即，如果我有值 123.45678，我

如何为 PrimeNG p-dropdown 静态添加选项

我想为 p-dropdown 静态添加选项。 我想为 p-dropdown 静态添加选项。 <p-dropdown [(ngModel)]="selectedOption" placeholder="Select options" optionLabel="name" (onChange)="onChangeOption()"> <option *ngFor="let item of items;" [value]="item.value">{{item.label}}</option> <option value="null">Others</option> </p-dropdown> 我尝试在 ts 文件中动态添加“Others”选项，但我仍然想像这样静态添加 有没有更好的方法来做到这一点？谢谢大家 您不能直接在 p-dropdown 中使用选项。您必须向选项数组提供数据。例如这里变量cities保存选项数组 <div class="card flex justify-content-center"> <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Select a City" /> </div> 如果你不想从控制器类提供它，那么你可以像这样直接在 HTML 本身中传递数组 <div class="card flex justify-content-center"> <p-dropdown [options]="[{name: 'Australia', code: 'AU'},{name: 'Brazil', code: 'BR'}]" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Select a City" /> </div>

全局插入 PrimeNG 复选框自定义图标 TemplateRef（通过指令？）[PrimeNG]

PrimeNG 更改了 ui 组件的图标机制，我正在将 Angular 从 15 更新到 17。我想要我的自定义复选框图标。 触摸 html 或 ts 文件中 p-check 的逻辑...

如何在 Angular 中使用 primeNG 分页器

我无法在我的 Angular 应用程序中固定 primeNG 分页器。该分页器包含一个下拉列表，这实际上是我想要对其进行样式化以进行数据编号选择的地方。我搜索了很多次但是

在 primeng 17 中找不到模块“primeng/floatlabel”或其相应的类型声明

我在我的项目中使用Primeng版本17。 完全根据文档，我继续导入 primeng/floatlabel ，它给出了一个不相关的错误 问题出在哪里？ 版本...

PrimeNg 编辑器：值未从 formControl 中显示

我有一个组件，其中包含一个由两个控件组成的 formGroup： `enFormGroup: FormGroup = this.fb.group({ titleEn: ['测试', Validators.required], textEn: ['你好世界',

通过指令 [PrimeNG] 插入复选框图标 TemplateRef

PrimeNG 更改了 ui 组件的图标机制。我想要我的自定义复选框图标。 触摸 html 不是一个选项，而是使用指令。 我想插入