primeng 相关问题

使用 RTL 方向的 Treetable Primeng 问题

图像为例 当您滚动左右标题而不滚动时，Treetable Primeng 使用方向 RTL 出现问题 您可以在 github 存储库或在线编辑器中帮助我们吗 我知道Primeng不支持RTL 我是

无法在 p-autocomplete 中为 ngModel 设置值

我有编辑组件，我在其中使用 primeNG p-autocomplete 这是该组件的 html 我有编辑组件，我在其中使用 primeNG p-autocomplete 这是该组件的 html <div class="form-group row"> <label class="col-lg-2 col-form-label" style="text-align:left;"><strong>Birim</strong></label> <div class="col-lg-5 ui-fluid"> <p-autoComplete [(ngModel)]="selectedBirimAdvanced" [suggestions]="filteredBirim" name="birim" (completeMethod)="search($event)" [dropdown]="true" field="adi" (onSelect)="doOnSelect($event)" > <ng-template let-dto pTemplate="item"> <div>{{dto.adi}}</div> </ng-template> </p-autoComplete> <span style="margin-left:50px">Birim: {{selectedBirimAdvanced||'none'}}</span> </div> </div> 这是该组件的打字稿 @Component({ selector: 'kt-talep-giris-edit', templateUrl: './talep-giris-edit.component.html', styleUrls: ['./talep-giris-edit.component.css'], providers: [ConfirmationService] }) export class TalepGirisEditComponent implements OnInit { constructor(...) { } talep: PerBirimTalep = new PerBirimTalep(); /*dropdown variables*/ birim2: any[]; filteredBirim: PerBirim[]; selectedBirimAdvanced: string; ngOnInit() { this.sub = this.route.params.subscribe(params => { const id = params['id']; if (!isNaN(id) && id != 'new') { this.findByTalep(id); } this.getCombo(); }); } findByTalep(id: number) { this.perBirimTalepService.getByTalep(id).subscribe( data => { this.talep = data; }, error => { //this.showError('HATA', error); this.showMessage('error', 'Kayıt Bulunamadı.', 'Uyarı'); } ); } //Birim autocomplete getComboBirim2() { this.parameterService.getBirim().subscribe(data => { this.birim2 = data; }); } search(event) { let filtered: PerBirim[] = []; let query = event.query; for (let i = 0; i < this.birim2.length; i++) { let birim1 = this.birim2[i]; if (birim1.adi.toLocaleLowerCase('tr').indexOf(query.toLocaleLowerCase('tr')) == 0) { filtered.push(birim1); } } this.filteredBirim = filtered; } doOnSelect(event) { this.selectedBirimAdvanced = event.birimId; console.log('selectedBirimAdvanced '+ event.birimId ) } } 我的问题是 p-autocomplete ngModel 未设置并且“Birim”为空。但我使用组合框 ngModel 进行设置。 我在 p-autocomplete 中写了 ngModel“selectedBirimAdvanced”。 这是浏览器屏幕截图。 截图 如何设置“Birim”字段。 我该如何解决它。 我不确定这是否是问题所在，但也许它有帮助：尝试取出 onSelect 并看看会发生什么。你的 ngModel 是双向绑定的，那么为什么要额外进行 onSelect 呢？理论上你要设置你的模型两次

下拉过滤器不过滤值，或者过滤器显示对象而不是值

我使用的是primeng版本16.9.1，并在我们的项目中使用下拉组件。 正如文档中提到的，我们应该使用 [filter]="true" 属性。如果我们使用这个属性，抛出...

输入字符后输入失去焦点

我使用的是primeng表。每个表都有自己的列。 表格示例： 附件OneTable：任意[] = [ { 名称：'N0.'，字段：'declarationOrder'，宽度：'2rem' }, //其他字段 ];

角度材质中的拖放功能在 PrimeNG 轮播中不起作用

我目前正在开发一个 Angular 项目，我需要使用 PrimeNG 的 Carousel 组件以及 Angular Material 的拖放功能。单独来看，两个组件都按预期工作。

PrimeNG 单选按钮的自定义取消行为

我正在为一个带有大量表单的应用程序开发热键功能，该应用程序具有通过“WASD”而不是经典的“Tab”/“Shift+Tab”来聚焦元素的自定义行为。 一个...

如何防止浏览器自动完成 primeng p 密码？

这是我研究了一段时间但一直没能找到解决方案的问题。我有一个 PrimeNG p 密码，但我不希望它填写密码。 这是我研究了一段时间但一直没能找到解决方案的问题。我有一个 PrimeNG p 密码，但我不希望它填写密码。 <p-password autocomplete="new-password" [toggleMask]="true" [feedback]="false"/> 使用 autocomplete="new-password" 可以防止组件加载后自动完成，但当我单击输入时，它仍然建议保存密码。 如何防止点击输入时填写密码？ 我们可以autocomplete="off"阻止这些建议。 <div class="card flex justify-content-center"> <input type="text" pInputText [(ngModel)]="value" id="email" name="email" /> </div> <div class="card flex justify-content-center"> <input type="text" pInputText [(ngModel)]="value" id="email" name="email" autocomplete="off" /> </div> <p-password autocomplete="off" [toggleMask]="true" [feedback]="false" /> Stackblitz 演示

如何访问 PrimeNG Dropdown 的 OverlayOptions OnBeforeShow 回调？

是否可以监听即将打开的下拉菜单覆盖事件？ Dropdown 的 OverlayOptions 提供 OnBeforeShow 回调，但我无法使用/访问它。 就像是 是否可以监听下拉菜单覆盖事件即将打开？ 下拉菜单的 OverlayOptions 提供 OnBeforeShow 回调，但我无法使用/访问它。 类似的东西 <p-dropdown #dropdown (onBeforeShow)="doSomething()" </p-dropdown> 或者 this.dropdown.overlayOptions.onBeforeShow((e) => { doSomething(e); } 会很酷。 我们需要访问覆盖层的子视图。 为此，我们可以使用属性 overlayViewChild import { Component, OnInit, ViewChild } from '@angular/core'; import { ImportsModule } from './imports'; import { Dropdown } from 'primeng/dropdown'; import { Subscription } from 'rxjs'; interface City { name: string; code: string; } @Component({ selector: 'dropdown-basic-demo', templateUrl: './dropdown-basic-demo.html', standalone: true, imports: [ImportsModule], }) export class DropdownBasicDemo implements OnInit { private sub: Subscription = new Subscription(); @ViewChild(Dropdown) pdropdown!: Dropdown; cities: City[] | undefined; selectedCity: City | undefined; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' }, ]; } ngAfterViewInit() { this.sub.add( this.pdropdown.overlayViewChild.onBeforeShow.subscribe((event: any) => { console.log('from listener', event); }) ); } doSomething() { console.log('something'); } ngOnDestroy() { this.sub.unsubscribe(); } } Stackblitz 演示

将 PrimeNG 表导出到 Excel 文件 (xlsx)

如何将PrimeNG中的表格数据导出到Excel文件？ 我知道，PrimeNG 网站上有一个示例对此进行了解释。 但该示例仅将可见表值导出到 Excel ...

如何将左树中的节点拖放到右树中作为副本而不移动

我正在使用 Angular 14 版本 我正在使用 PrimeNg DragDrop 控件，在这里我面临一些问题，当我将节点从左树拖动到右树时，拖动的节点是

- 1.如果'<ta g>'是角度分量，那么验证它是这个模块的一部分

错误的含义是什么以及如何修复它 如果 '' 是 Angular 组件，则验证它是否是该模块的一部分。 如果 '' 是 Web 组件，则添加 'CUSTOM_ELEMENTS_SCHEMA' 错误混乱...

PrimeNG floatLabel 无法正常工作

我将 Angular 17 与 PrimeNG 结合使用，但遇到了 p-floatLabel 无法按预期工作的问题。任何地方都没有错误，但标签不浮动。 我不知道我应该做什么。 这里...

如何将文件转换为PrimeNG文件上传器接受的格式？

我正在使用 Angular 和 primeng。 我有以下场景： 我从 api 收到一张图像，然后我想将其推入 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 没有。 动画应该是一个简单的边框底部幻灯片，来自...