primeng 相关问题

如何使此列表不区分大小写并在 primeng 下拉列表中按字母顺序列出？

例如我有一个数组的对象如下： 常数人 = [ {值：“杰森”}， {值：“安娜”}， {值：“铁”}， ] 目前，结果是： 如何

PrimeNG 滑块 - 单击事件

我正在尝试 primeng 的滑块组件，令我惊讶的是，我发现他们没有任何滑块的 onClick 事件，尽管如此，我看到他们暴露了 onChange 和 onSlideEnd 事件......

PrimeNg 禁用手风琴展开按钮

有没有办法有条件地禁用 PrimeNg 手风琴中的展开按钮而不禁用整个标题？我在标题中有一些其他按钮并希望它们可单击，我只想...

primeng p-多选下拉过滤器搜索未显示未找到结果 primeNG v-16.7.1

我添加了 primng p-multiselect，并且我有一个过滤器，当找不到结果时我可以在其中进行搜索，而不是消息未出现输入图像描述，我正在谈论...

在表格 Angular 8 中添加链接

我有一个包含一些列的表格，并且有一个可以单击和下载的“文档”列。 我怎样才能只将文档名称设为链接？ 超文本标记语言 我有一个包含一些列的表格，还有一个可以单击和下载的“文档”列。 我怎样才能只将文档名称设为链接？ HTML <p-table #dt3 [columns]="colsPermessi" [value]="permessi" [paginator]="true" [scrollable]="false" [rows]="10" [autoLayout]="true"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns" pResizableColumn>{{col.header}} </th> <th>Azioni</th> <th>Permessi</th> </tr> </ng-template> <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr [pSelectableRow]="rowData"> <td *ngFor="let col of colsPermessi"> {{rowData[col.field]}} </td> </tr> </ng-template> 因此，我希望“文档”列可单击，单击时它会调用“downloadFile ()”函数。 我该怎么做？ 这可以使用 *ngIf 来分隔你的案例来完成。对于 documento 列，使用 ngIf 插入超链接标记。对于其他所有内容，只需插入文本即可。请参阅下面的示例： <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr [pSelectableRow]="rowData"> <td *ngFor="let col of colsPermessi"> <span *ngIf="col.header == 'Documento'><a [href]="col.url">{{rowData[col.field]}}</a></span> <span *ngIf="col.header != 'Documento'>{{rowData[col.field]}}</span> </td> </tr> </ng-template> 我可以看到/a标记，但我看不到标记

PrimeNg 复选框执行功能

我一直在尝试让一个函数在按下数据表中的复选框时发生。基本上我拥有的是一个包含默认值的数据表（例如 1 到 10）。然后我给出一个数组

如何解决Angular 10 primeng NullInjectorError：没有ConfirmationService的提供者？

我正在使用 primeng verifyDialog，它需要在我的 Angular 10 项目中使用confirmationService，但 localhost:4200 上没有显示任何内容，并且我在 Chrome 控制台中收到以下错误。 错误

如何防止点击子节点时覆盖TreeSelect复选框自动折叠

在primeNg的网站文档中https://primeng.org/treeselect#checkbox 首先，我单击“文档”复选框 ->“主页”复选框 当我单击文档 -> 主页时 其次，我单击发票复选框 资源...

primeng p-multiSelect 过滤器在 Angular 中无法正常工作

它使用 p-multiSelect 组件 如果您搜索，结果和列表会一起出现。 只是没有找到任何结果应该出来，但列表似乎没有被过滤 我该如何解决这个问题 ...

Primeng中无法设置tabview内容的背景颜色

我创建了一个 p-tabview，每个选项卡都包含一些内容。为此，我通过添加以下代码修改了 app.component.html： 我创建了一个 p-tabview，每个选项卡都包含一些内容。为此，我通过添加以下代码修改了我的 app.component.html： <p-tabView class="tabmain" [style]="{'background-color': 'cyan', 'margin-left':'0'}"> <p-tabPanel header="Godfather I" leftIcon="pi pi-calendar" [style]="{'background-color': 'red'}"> <div [style]="{'background-color': 'red', 'margin-left':'0'}"> Hi. This is the content. </div> </p-tabPanel> </p-tabView> 我打算提供深色背景，因为我必须在深色主题中创建选项卡视图。我尝试添加上面的样式来检查背景颜色，结果是： 如图所示，内容和选项卡视图之间的部分是白色的。我打算以整个网格变暗的方式进行样式设置。青色和红色只是示例颜色，用于检查背景颜色应用于每个属性的位置。 如何更改内容和选项卡视图边界之间的背景颜色（当前为白色）？ 查看文档 您应该在组件的 scss（或 css）中操作 p-tabview-panels，我们在 style.scss（或 css）中进行全局操作。 所以你的CSS是这样的 :host ::ng-deep .p-tabview .p-tabview-panels{ 'background-color': 'red' } 在本地样式部分了解更多信息 https://www.primefaces.org/primeng/showcase/#/theming 用这个 /* not selected */ .p-tabview .p-tabview-nav li .p-tabview-nav-link { border-color: white ; background: white; color: navy; } /* hover */ .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { background: orange; border-color: brown; color: navy; } /* selected */ .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { background: #3b82f6; border-color:#3b82f6; color: white; }

PrimeNG 日历自定义年份范围

我正在尝试重新设计 PrimeNG 日历组件。 我想制作自定义标题和自定义年份范围。 我正在尝试重新设计 PrimeNG 日历组件。 我想制作自定义标题和自定义年份范围。 <p-calendar [formControl]="control"> <ng-template pTemplate="header"> <div>Custom header</div> </ng-template> </p-calendar> 如果我使用此内容投影，我会得到新的标题行，但不会覆盖原始标题。我想以 3 列显示年份。当我覆盖样式时，我得到了 3 列，但是对于 3 列，我需要 12 年而不是 10 年。在文档中有十年参数，但我不知道如何使用它。 将以下样式添加到您的 CSS 中： p-calendar .p-calendar .p-datepicker .p-yearpicker .p-yearpicker-year { width: 33.3%; } 如果它不能立即起作用，请尝试在选择器的开头添加 ::ng-deep： ::ng-deep p-calendar .p-calendar .p-datepicker .p-yearpicker .p-yearpicker-year { 如果还是不行，请添加!important： width: 33.3% !important; 这应该是结果： 注意： 不同版本的 PrimeNG 之间的元素结构可能有所不同，因此如果它不起作用，请告诉我您正在使用哪个版本。另外，如果您更新 PrimeNG 版本，您可能需要对 CSS 进行更改。 编辑：不幸的是，列表中出现的年份数目前硬编码为 10。这可以在方法yearPickerValues()中的此文件中看到： yearPickerValues() { let yearPickerValues = []; let base = this.currentYear - (this.currentYear % 10); for (let i = 0; i < 10; i++) { // <-- here yearPickerValues.push(base + i); } return yearPickerValues; } 您可以在他们的 GitHub 页面上打开一个问题，并要求他们添加一个输入。 你可以做到这一点。我正在使用viewChildren。您也可以使用 viewChild。这样，您必须在 ngAfterViewInit 钩子内使用该实例并执行下面的操作 @ViewChildren(Calendar) calendarInstances!: QueryList<Calendar>; this.calendarInstances.forEach((instance) => { instance.yearPickerValues = function () { let yearPickerValues = []; let base = <number>this.currentYear - (<number>this.currentYear % 12); for (let i = 0; i < 12; i++) { yearPickerValues.push(base + i); } return yearPickerValues; }; });

如何将数据从2个主组件传递到1个子组件

我有 2 个主要组件，我想将数据从这些组件传递到子组件。 FirstMainComponent 正在将数据传递给 ChildComponent @成分（{ ... 提供商：[DialogService...

Prime NG - 轮播导航指示器需要自定义点

我正在开发prime Ng Carousel，想要更改导航的点数。 如果有 6 张迷你卡，我需要 6 个点用于轮播。应显示至少 4 个迷你卡。 有没有办法开发...

使用 <p-captcha > 标签时，primeNG 出现问题

我正在使用 Angular 16.0.0 和 primeng 16 。 尝试将 google recaptcha v3 添加到我的项目中。在primeng网站指南中似乎很容易，但添加后 “从 'primeng/captch 导入 {CaptchaModule}...

当我们单击子模板中定义的按钮时，如何隐藏 PrimeNG 侧边栏（在父模板中定义）？

我正在使用 PrimeNG 侧边栏，当我们单击按钮时，它会向右滑动并路由到子组件，在子组件中我有带有取消按钮的表单模板。 你可以找到侧边栏模板...

角度日历 - PrimeNG

我正在使用带有 Angular 4 的 PrimeNG 日历组件。它符合我的大部分要求，只是我看不到在组件中显示周数的方法。 我是否忽略了一些简单的事情，或者如果不是

禁用自动选择 PrimeNG 弹出菜单中的第一项

我在弹出模式下使用 PrimeNG 的 p-menu 组件 ([popup]="true")，并且遇到了不良行为：菜单中的第一项被自动选择并变成灰色`，

如何更改 splitButton primeng 17 中的图标下拉菜单

我想更改primeng版本17中的splitButton下拉图标 我查看了 splitButton 部分的文档，有一个称为图标的功能，我更改了它，但是标签部分更改了，我

p-table virtualScroll 按下空格键时滚动表格

我尽了最大努力寻找解决方案，但这次我没有运气。 我正在使用 PrimeNG p-table 组件（具有可编辑字段），并且如果元素超过 100 个，我就会激活 virtualScroll。 ...

Angular PrimeNG 编辑器获取多个实例

嗨，我正在使用带有 Angular 的 prime ng 编辑器，并获得了多个 primeNg 编辑器 x.component.html 嗨，我正在使用带有 Angular 的 prime ng 编辑器，并获得了多个 primeNg 编辑器 x.component.html <p-editor [modules]="quillConfiguration" formControlName="questionName" id="questionContents" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,'questionName')"></p-editor> <p-editor [modules]="quillConfiguration" formControlName="questionDesc" id="questionDesccontents" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,'questionDesc')" ></p-editor> <p-editor [modules]="quillConfiguration" formControlName="guidelines" id="guidelinesContents" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,'guidelines')"></p-editor> <p-editor [modules]="quillConfiguration" formControlName="{{item.attributeName}}" id="contents{{item.attributeName}}" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,item.attributeName)"></p-editor> x.component.ts import * as Quill from 'quill' import { Editor } from "primeng/editor"; @ViewChildren(Editor) editorCmp : QueryList<Editor>; public quillConfiguration = { toolbar: { container: [...], handlers: { 'customStyles': (value) => { const selectionRange = this.quill.getSelection(); //throwing error cannot read properties of undefined(reading getSelection) } } } }; private quill: undefined | Quill; 使用 @ViewChildren() 我正在访问编辑器并在其上调用 getQuill 方法 x.component.ts ngAfterViewInit(): void { this.editorCmp.changes.subscribe(editor => { editor.toArray().forEach((edit, idx) => { this.quill = edit.quill }) }) } 我不确定这是否是获取编辑器实例的正确方法，只有最后一个p-editor获取实例，不知道我们如何才能获取所有实例？ ViewChildren 为您提供与您的查询匹配的所有项目的可观察列表，即 Editor。您将获得您正在使用的 4 个编辑器的列表。 在ngAfterViewInit中，当您订阅this.editorCmp.changes时，editor将获得4位编辑。然后你为其中的每个人分配 edit.quill 到 this.quill。因此，由于您覆盖了前 3 个作业，因此实际上只有最后一个作业有效。 如果你想存储全部 4 个，你可以将它们存储在编辑器数组中，如下所示： x.component.ts private quills: undefined | Quill[]; // Change to array of Quill ngAfterViewInit(): void { this.editorCmp.changes.subscribe((editors) => { this.quills = editors.map((editor) => editor.quill); }) }