primeng 相关问题

在 PrimeNG 表（Angular）中过滤嵌套列

所以我有一个嵌套的列，例如客户.爱好.最爱。我希望能够根据 favourite.name 进行过滤。 数据样本： { 编号：1000， 名称：“詹姆斯·巴特”， 可以...

PrimeNG 无法使用同一组件打开多个动态对话框（嵌套）

我正在尝试使用组件 ProductListDemo 打开 DynamicDialog。一旦 ProductListDemo 对话框打开，对话框本身就会多出一个按钮，可以再次打开 ProductListDemo 组件...

按 Tab 时跳过 Primeng 自动完成中的下拉按钮

我正在使用 primeng 在我的 Angular 反应形式中使用带有下拉菜单的多个自动完成功能。自动完成的形式如下： 我正在使用 primeng 在我的 Angular 反应形式中使用带有下拉菜单的多个自动完成功能。自动完成的形式如下： <p-autoComplete inputId="myInput" class="p-fluid" [dropdown]="true" formControlName="myFormControl" (completeMethod)="filter($event.query)" [suggestions]="suggestions" [forceSelection]="true" [showClear]="true" (onClear)="myFormControl.reset()" appendTo="body"> </p-autoComplete> 这按预期工作。但是，当使用 tab 键从一个输入跳转到下一个输入时，它还会聚焦“打开下拉菜单”按钮。我想跳过聚焦此按钮并直接跳到下一个输入字段。 我无法在 [tabindex]="-1" 元素上使用 p-autocomplete，因为这样它只会跳过整个自动完成输入，但我只想跳过下拉按钮。 有什么办法可以实现这一点吗？谢谢。 没有内置属性可以执行此操作，因此您需要创建一个自定义指令来执行此操作。它看起来像下面这样，我们找到按钮并使用 renderer2 和 elementRef 将选项卡索引更新为 -1 import { Directive, ElementRef, Renderer2 } from '@angular/core'; @Directive({ selector: '[noButtonFocus]', standalone: true, }) export class NoButtonFocusDirective { constructor(private element: ElementRef, private renderer: Renderer2) {} ngAfterViewInit() { const dropdownButton = this.element.nativeElement.querySelector( '.p-autocomplete-dropdown' ); if (dropdownButton) { this.renderer.setAttribute(dropdownButton, 'tabindex', '-1'); } } } 父组件： <div class="card flex justify-content-center"> <p-autoComplete noButtonFocus [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" /> </div> Stackblitz 演示

primeng p-压延机尺寸对话框压延机问题

我用过 我使用了但是如果导航器的缩放为100％，则日历的输入将变得不可见 我们可以帮助我吗，我尝试使用此代码，它显示日历未粘在输入上 <p-calendar [(ngModel)]="date1" [showIcon]="true" [iconDisplay]="'input'" [showOnFocus]="false" inputId="icondisplay" [showTime]="true" inputId="start_date" dateFormat="dd/mm/yy" [placeholder]="'jj/mm/yyyy hh:mm'" styleClass="scale-calendar" /> :host ::ng-deep .p-datepicker { transform: scale(0.9); /* Adjust the scale to your desired value */ } 您可以通过两种方式解决： 您还可以调整选择器覆盖层的位置，让您的 p-calendar 并向其添加一个类，例如，我们将其称为 calendarContainer <p-calendar [(ngModel)]="date1" [showIcon]="true" [iconDisplay]="'input'" [showOnFocus]="false" inputId="icondisplay" [showTime]="true" inputId="start_date" dateFormat="dd/mm/yy" [placeholder]="'jj/mm/yyyy hh:mm'" class="calendarContainer" /> 现在，让我们来设计造型吧 .calendarContainer { position: relative; height: 50px; } .calendarContainer > .p-datepicker { top: calc(100% + 60px + 10px) !important; } 100%，因为我们希望它位于底部 60px是我们日历输入的高度 10px是日历输入的填充 这将导致 如果您想将其显示为弹出窗口，您可以将 touchUI 属性添加到日历中。 看起来像这样：

Angular p-dropdown 禁用属性不适用于反应式表单控件

<p-dropdown formControlName="signatures" [disabled]="true" placeholder="Please Select Signature" [options]="signatureOptions" (onChange)="selectSignature($event,rowIndex)"></p-dropdown> 我使用的是 Angular 11 版本，并且在使用 formControl 时，“disabled”属性与 p-dropdown 配合得很好。然而，升级到 Angular 17 后，由于 formControl 的原因，disabled 属性停止工作。当我删除 formControlName 时，禁用的属性开始正常工作。 要将“disabled”与“formControl”一起使用，您必须在初始化“formControl”时设置“disabled”属性，这样才能正常工作。” signatures = new FormControl({value : '', disabled: true}); 您应该使用类似的方法来禁用它： this.form.get('signatures')?.disable(); 以及类似这样的东西来启用它： this.form.get('signatures')?.enable(); 这是因为从 Angular 版本 17 或更高版本开始，您应该使用 enable 和 disable，正如 Eliseo 在他的评论中指出的那样。

当我运行 Angular 项目时，我在 ./node_modules/primeng/fesm5/primeng-chart.js 和 primeng-editor.js 中收到错误 ERROR

当我运行角度项目时，出现错误 ./node_modules/primeng/fesm5/primeng-chart.js 和 primeng-editor.js 中出现错误 我用 角度版本 8 节点14.21.3 启动9 我尝试删除node_modules，pac...

PrimeNG Angular，年份选择器无法作为响应式工作

我做错了什么还是这是一个错误（中间，年份选择器不起作用）： 我做错了什么还是这是一个错误（中间，年份选择器不起作用）： <!-- Month Control --> <input type="month" view="month" dateFormat="mm" > <!-- Year Control --> <input type="year" view="year" dateFormat="yy" /> <p-calendar view="year" dateFormat="yy" /> MONTH 控件用作日期选择器，底部的 p-calendar 年份选择器可以工作，但中间的年份选择器则不能，仅显示为文本输入字段。 是否有一些特定的“类型”“视图”，...等我错过了，我可能还没有尝试过？ 或者，这实际上仍然是一个错误吗？ 我认为两年前的错误修复仅修复了年份选择器的“p-calendar”的“formControlName”反应性使用，而不是底层/完整的反应性+yearpicker“修复”（https://github.com/github.com/formcontrolname/formcontrolname）。 com/primefaces/primeng/issues/11223） --版本： 角度 CLI：16.2.11 节点：18.17.1 包管理器：npm 9.6.7 操作系统：win32 x64 素萌：16.9.1 感谢您的建议，如果我错过了某些内容或确认它应该作为错误提出。 HTML 尚不支持“type=year”仅显示年份。您可以使用 type=number 进行自定义，并提供最小最大值，例如 this 或使用 p-calender。

使用 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 文件上传器的文件数组中，以用我的...