primeng 相关问题

在 primeng 多选对话框关闭时触发事件

我正在尝试使用 primeng 多选组件。我想在用户关闭多选下拉列表后立即获取所有选定的值。有办法做到吗？我知道我们有 onChange() ev...

npm 可以帮助识别 Angular 16 依赖项的 Primeng 兼容版本吗？

在尝试安装primeng时，我遇到了以下错误消息： npm i primeng npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法解析依赖关系树 npm 错误！ npm 错误！虽然决心...

Angular 17 ngprime 编辑器不显示 ngmodel 值

我正在 Angular 17 中使用 ng prime 和 sakai 主题。我正在尝试使用 ngprime 编辑器，但不渲染 ng 模型。 这是我的项目详细信息： 测试组件.ts 从 '@ang...

Primeng 12 Angular 12 自定义库：在...中声明的错误符号字段集在compileOnSave后不会从primeng/fieldset导出

我对 primeng 和 Angular 感到头疼，当我将 primeng 添加到我的 Angular 库时（它已经安装在主项目中），这一切都会发生。构建库和主项目后

无法在prime ng表的每一行添加复选框

我正在尝试在 prime ng 表中添加复选框，但收到以下错误vendor.js:73494 ERROR NullInjectorError: R3InjectorError(AppModule)[Table -> Table]: 。这就是我正在尝试的...

为什么我无法阻止用户编辑 PrimeNG 表单字段值？

我正在使用 PrimeNG 开发 Angular 项目，并且在尝试禁用文本表单编辑到字段时发现以下困难。 基本上进入我的组件的 HTML 代码...

Angular 和 PrimeNg FileUploader：如何在渲染组件时显示所选文件的列表？

我正在使用 Angular 17 和 PrimeNg 17 复制者在这里： 关联 我的目的是让一个或多个预选文件显示在所选文件列表中。正如你所看到的，我称之为。

扩展数据视图背景颜色以填充卡片

我有这个： https://stackblitz.com/edit/primeng-dataview-demo-1kpf4h?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.scss 确保您位于网格视图中。 我想要的只是流行

PrimeNG Calendar 需要找到一种方法来覆盖默认的输入键行为

我正在使用PrimeNG的日历组件。对于特定场景，我想覆盖默认的 Enter 键行为。目前，当日历打开时，Enter 键会关闭日历。我想跑步

Angular 搜索和添加功能

我目前有： ngOnInit() { this.getUsers(); } 获取用户（）{ this.http.get(“https://graph.microsoft.com/v1.0/users”) .订阅（用户=> {

当新数据从父组件到达时如何重新渲染子组件

我有以下代码。父组件使用 @Input 指令向子组件发送一些数据： 父 HTML 我有以下代码。父组件使用 @Input 指令向子组件发送一些数据： 父 HTML <div> <my-timeline [data]="data"> </my-timeline> </div> 在Parent TS中有一个服务向data提供数据 家长TS data=[]; ... this.service.getData().subscribe(res => { res.map(item=>{ this.data.push({ ... }); }) }) 孩子收到的信息是 儿童TS @Input data; eventArray=[]; ngOnInit() { console.log("called"); // called only for the first time createTimeline(data[0].id); // called only for the first time } createTimeline(id) { // called only for the first time this.eventArray.push(.....) } 子 HTML <p-timeline [value]="eventArray"> ... </p-timeline> 问题是p-timeline继续显示旧事件，即第一次加载的事件。因为父级的后续数据更改不会导致子级中的 ngOnIt 运行。这就是为什么 createTimeline 再也没有被调用过。请参与。 为了检测 @Input 属性的更改，您可以实现以下操作之一： Setter - 将 @Input() 属性实现为 getter 和 setter，如下所示： private _data: any; @Input() set data(value: any) { this._data= value; if(this._data) this.createTimeline(this._data[0].id) } get data(): any{ return this._data; } OnChanges 生命周期挂钩 - 首先解释一下什么是OnChanges钩子？ 来自 Angular.io： OnChanges 是一个生命周期钩子，当任何数据绑定属性 指令更改。定义一个 ngOnChanges() 方法来处理 变化。 让我们实现 OnChanges 生命周期挂钩，如下所示： @Component({...}) export class SelectedPlayerComponent implements OnChanges { @Input() data; ngOnChanges(changes: SimpleChanges) { if(changes.data) { this.createTimeline(changes.data.currentValue[0].id);//the new value that's changed } } } 感谢 Todd Motto 关于 检测角度输入变化 的好文章 在所有组件上使用 ChangeDetectionStrategy.Default 或使用不可变数据方法，例如 this.data = [...this.data, {//item}]; 可以在 docs 中阅读它，以及 Angular ngOnInit 的工作原理

Primeng MenuItem 的命令不起作用

我创建了一个表格组件，并为每行添加一个拆分按钮并尝试调用该函数但不起作用 这是我用来创建菜单项的函数 获取项目（行数据...

更改Primeng中的进度条颜色

我们如何更改Primeng中的进度条颜色。在进度条文档中，它列出了 ui 进度条值 作为宽度根据值变化的元素。 但是当在...

无法绑定到“appendTo”，因为它不是 p-confirmPopup 的已知属性

我有一个 PrimeNG 组件，我想附加到父 div，但它似乎总是附加到正文。 从 '@angular/core' 导入 { Component } ； 导入 { 确认服务，

如何在 Angular 中动态渲染 Primeng 组件？

我的要求是动态渲染 Primeng 组件以及普通的 html 元素，要渲染的模板是如下字符串形式 常量动态模板 = ` 我的要求是动态渲染 Primeng 组件以及普通的 html 元素，要渲染的模板是如下字符串形式 const dynamicTemplate = `<div class="card flex flex-row gap-3 justify-content-center"> <button type="button" class="btn btn-primary">Normal Button</button> <p-button label="Primary"></p-button> <p-button label="Secondary" styleClass="p-button-secondary"></p-button> <p-button label="Success" styleClass="p-button-success"></p-button> <p-button label="Info" styleClass="p-button-info"></p-button> <p-button label="Warning" styleClass="p-button-warning"></p-button> <p-button label="Help" styleClass="p-button-help"></p-button> <p-button label="Danger" styleClass="p-button-danger"></p-button> </div>` 现在我想在满足某些条件时动态渲染此模板。 这个问题很明显，primeng 组件需要在应用程序中注册才能让 Angular 识别它们。 我使用了ComponentFactoryResolver来动态创建组件并向其中注入模板，但它只渲染普通的html，而不渲染primeng组件。我也用过[innerHtml]，但也不起作用。 有没有可以动态渲染primeng组件的方法？ 你不能直接从字符串渲染这个模板，你需要先解析它，然后分别渲染每个组件。我建议使用其他格式来存储此信息，而不是简单的字符串（例如描述每个组件的 JSON，但它在很大程度上取决于您的用例），因为它可能更容易使用。 从 Angualar v13 开始，您可以使用 ViewContainerRef.createComponent 并直接传递 PrimeNG 组件引用。 每个 PrimeNG 可视化组件都会导出其模块和组件。例如，here您可以看到导出的模块中只有 ToolbarComponent 和 CommonModule），因此您不需要导入整个模块（如果您以编程方式渲染它，如下例所示），只需导入组件（这可能会有所不同）组件及其要求）。 这是创建 PrimeNG 工具栏 的简短示例，其中包含适合我的按钮（Angular 17.1.3、PrimeNG 17.6）： import { Toolbar } from 'primeng/toolbar'; import { Button } from 'primeng/button'; ... private viewRef = inject(ViewContainerRef); private renderer = inject(Renderer2); ... private renderToolbar() { const parentElement = this.renderer.createElement('div'); const toolbar = this.viewRef.createComponent(Toolbar); const toolbarGroupStart = this.renderer.createElement('div'); toolbarGroupStart.setAttribute('class', 'p-toolbar-group-start'); const toolbarMenuBtn = this.viewRef.createComponent(Button); toolbarMenuBtn.instance.styleClass = 'p-button-info'; toolbarMenuBtn.instance.label = 'Menu'; toolbarGroupStart.appendChild(toolbarMenuBtn.instance.el.nativeElement); toolbar.instance.getBlockableElement().appendChild(toolbarGroupStart); parentElement.appendChild(toolbar.instance.getBlockableElement()); this.renderer.appendChild(document.body, parentElement); }

检查 windows beforeunload 事件是如何触发的 - 按下按键或关闭浏览器时

我正在监听窗口的 beforeunload 事件。 然后我想确定 beforeunload 事件是由按下的按键（Ctrl+r/F5）还是由用户关闭浏览器窗口触发。 在这两种情况下我...

Fileupload - 服务的端点和 OpenAI 生成

我的端点是一个 RestConroller，其 Post-Method 如下所示： @PostMapping(路径 = "/xetra", 消耗 = { MediaType.APPLICATION_JSON_VALUE， 媒体类型。

Primeng v11 进度微调器不改变颜色

我正在使用 primeng 版本 11，并且我正在尝试更改微调栏的颜色，我尝试复制 primeng 形式的代码，但它对我不起作用。 html: 我正在使用 primeng 版本 11，并且我正在尝试更改微调栏的颜色，我尝试复制 primeng 形式的代码，但它对我不起作用。 html： <p-progressSpinner [style]="{width: '50px', height: '50px'}" styleClass="custom-spinner"></p-progressSpinner> CSS： @keyframes custom-progress-spinner-color { 100%, 0% { stroke: #16697A; } 40% { stroke: #489FB5; } 66% { stroke: #82C0CC; } 80%, 90% { stroke: #FFA62B; } } 模块已导入并检查了所有内容。 我遇到了同样的问题，我唯一能做的就是用 important 覆盖描边颜色的 CSS 规则。那么你只有一种颜色，没有渐变，但至少有效： .p-progress-spinner-circle { stroke: #yourColor !important; } 您可以使用相同的类名，无需新的： @Component({ selector: 'app-cart', templateUrl: './cart.component.html', styles: [` @keyframes p-progress-spinner-color { from { stroke: #yourColor; } to { stroke: #yourColor; } } `] }） 甚至你可以使用“from”和“to”，它们相当于百分比......干杯！！！ 请参阅文档以供参考 您应该在“@keyframes”代码块之前放置以下 CSS（在我的示例中为 SASS）： .ui-progress-spinner { &.custom-spinner { .ui-progress-spinner-circle { animation: ui-progress-spinner-dash 1.5s ease-in-out infinite, custom-progress-spinner-color 6s ease-in-out infinite; } } } 您需要重写动画本身，primeNg issues中有一个工作示例https://github.com/primefaces/primeng/issues/9232 您可以按如下方式更改微调器的颜色。 <p-progressSpinner class="spinner"></p-progressSpinner> .spinner ::ng-deep .p-progress-spinner-circle { stroke: white !important; }

Primeng 自动完成组件覆盖面板元素在自动完成栏上方展开：我如何才能仅在下方展开建议面板覆盖层

我一直在尝试设计 PrimeNg 自动完成组件的样式，以便当用户与其交互并且建议开始填充时，建议覆盖面板将仅显示在下面...

PrimeNg p-inputnumber 无法设置样式

我在尝试实现 PrimeNg Inputnumber 元素时陷入困境：https://www.primefaces.org/primeng/showcase/#/inputnumber 根据其文档，有几个属性可以...