primeng 相关问题

PrimeNg-侧边栏模块无法正确显示

我正在尝试创建一个右侧边栏1导航（单击btn1时打开），并且在其中应该从顶部打开另一个侧边栏导航（单击btn2时打开），其中sidebar2

在 Angular 13 中，如何在 *ngIf 删除元素之前应用代码？

我正在处理此表单，其中将根据所选选项显示输入 ... 我正在处理此表单，其中将根据所选选项显示输入 <form [formGroup]="form" (ngSubmit)="search()"> <div class="row"> <div class="col-4"> <p-dropdown [options]="selectCriteria" (change)="optionIsSelected" placeholder="{{this.translate.data.selectSearchCriteria}}" [showClear]="true" formControlName="searchOption"> </p-dropdown> </div> <div class="col-6"> <div *ngIf="optionSelected=='Recruiter'" #inputOption> <input pInputText type="text" [disabled]="!optionIsSelected" formControlName="recruiter"> </div> <div *ngIf="optionSelected=='Code'" #inputOption> #codeInput> <input pInputText type="number" [disabled]="!optionIsSelected" formControlName="codeRequest"> </div> </div> <div class="col-2"> <p-button *ngIf="!advancedSearch" type="submit" [label]="this.translate.data.search" [disabled]="form.invalid" class="col-2" icon="pi pi-search"></p-button> </div> </div> 我正在使用这种复杂的处理方法来根据选择的选项来停用一个或另一个输入的验证 ngOnInit(): void { this.form.get("searchOption").valueChanges.subscribe((searchOption) => { if (searchOption === 1 && !this.advancedSearch) { this.form.markAsUntouched(); this.optionSelected = "Code" this.optionIsSelected = true this.form.get("recruiter").setValue(""); this.form.get("recruiter").clearValidators(); this.form.get("recruiter").updateValueAndValidity(); this.form .get("codeRequest") .setValidators([Validators.required, Validators.pattern(/^[0-9]*$/)]); this.form.get("codeRequest").updateValueAndValidity(); } else if (searchOption === 2 && !this.advancedSearch) { this.form.markAsUntouched(); this.optionSelected = "Recruiter" this.optionIsSelected = true this.form.get("codeRequest").setValue(null); this.form.get("codeRequest").clearValidators(); this.form.get("codeRequest").updateValueAndValidity(); this.form.get("recruiter").setValidators([Validators.required]); this.form.get("recruiter").updateValueAndValidity(); } else { this.optionIsSelected = false } }); } 但我发现这种处理方式行不通，因为在我什至可以放弃它的验证之前，丢弃的输入对象就被破坏了，用表单错误维护我的视图，因为它在被破坏之前没有放弃验证。我尝试使用 ViewChild，但我没有找到 ViewChild 或 ViewChildren 的扩展来订阅或监听所述子项的销毁。在知道这些元素不是我制作的组件而是 PrimeNG 框架的下拉菜单的情况下，我可以使用哪种方式来预测它的破坏？ 我正在处理此表单，其中将根据所选选项显示输入 <form [formGroup]="form" (ngSubmit)="search()"> <div class="row"> <div class="col-4"> <p-dropdown [options]="selectCriteria" (change)="optionIsSelected" placeholder="{{this.translate.data.selectSearchCriteria}}" [showClear]="true" formControlName="searchOption"> </p-dropdown> </div> <div class="col-6"> <div *ngIf="optionSelected=='Recruiter'" #inputOption> <input pInputText type="text" [disabled]="!optionIsSelected" formControlName="recruiter"> </div> <div *ngIf="optionSelected=='Code'" #inputOption> #codeInput> <input pInputText type="number" [disabled]="!optionIsSelected" formControlName="codeRequest"> </div> </div> <div class="col-2"> <p-button *ngIf="!advancedSearch" type="submit" [label]="this.translate.data.search" [disabled]="form.invalid" class="col-2" icon="pi pi-search"></p-button> </div> </div> 我正在使用这种复杂的处理方法来根据选择的选项来停用一个或另一个输入的验证 ngOnInit(): void { this.form.get("searchOption").valueChanges.subscribe((searchOption) => { if (searchOption === 1 && !this.advancedSearch) { this.form.markAsUntouched(); this.optionSelected = "Code" this.optionIsSelected = true this.form.get("recruiter").setValue(""); this.form.get("recruiter").clearValidators(); this.form.get("recruiter").updateValueAndValidity(); this.form .get("codeRequest") .setValidators([Validators.required, Validators.pattern(/^[0-9]*$/)]); this.form.get("codeRequest").updateValueAndValidity(); } else if (searchOption === 2 && !this.advancedSearch) { this.form.markAsUntouched(); this.optionSelected = "Recruiter" this.optionIsSelected = true this.form.get("codeRequest").setValue(null); this.form.get("codeRequest").clearValidators(); this.form.get("codeRequest").updateValueAndValidity(); this.form.get("recruiter").setValidators([Validators.required]); this.form.get("recruiter").updateValueAndValidity(); } else { this.optionIsSelected = false } }); } 但我发现这种处理方式行不通，因为在我什至可以放弃它的验证之前，丢弃的输入对象就被破坏了，用表单错误维护我的视图，因为它在被破坏之前没有放弃验证。我尝试使用 ViewChild，但我没有找到 ViewChild 或 ViewChildren 的扩展来订阅或监听所述子项的销毁。在知道这些元素不是我制作的组件而是 PrimeNG 框架的下拉菜单的情况下，我可以使用哪种方式来预测它的破坏？ 处理此问题的一种方法是使用 Angular 的 OnDestroy 生命周期挂钩并结合订阅表单控件的值更改。当组件被销毁时，会调用 ngOnDestroy 方法，您可以利用此机会取消订阅任何订阅并执行任何必要的清理。 import { Component, OnDestroy } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Subscription } from 'rxjs'; @Component({ // ... your component decorator here }) export class YourComponent implements OnDestroy { form: FormGroup; optionSelected: string; optionIsSelected: boolean = false; searchOptionSubscription: Subscription; constructor(private fb: FormBuilder) { this.form = this.fb.group({ searchOption: [''], recruiter: ['', Validators.required], codeRequest: ['', [Validators.required, Validators.pattern(/^[0-9]*$/)]] }); this.searchOptionSubscription = this.form.get('searchOption').valueChanges.subscribe((searchOption) => { if (searchOption === 1 && !this.advancedSearch) { // ... your code for option 'Code' } else if (searchOption === 2 && !this.advancedSearch) { // ... your code for option 'Recruiter' } else { this.optionIsSelected = false; } }); } ngOnDestroy() { // Unsubscribe from the valueChanges subscription to prevent memory leaks this.searchOptionSubscription.unsubscribe(); } // ... rest of your component code }

当行在 Angular 中动态渲染时如何将冻结列添加到 primeNG

我正在寻求帮助，以在我的 primeng 表中添加冻结列功能，其中列和行是动态呈现的。 我确实有一个配置（isPK：true），它来自我想要的数据......

Bootstrap _reboot.scss 覆盖 PrimeNG 样式

Bootstrap 似乎覆盖了我的 PrimeNG 样式，更具体地说是它的 _reboot.scss 文件。我已将我在 styles.scss 和 angular.json 中引用的部分包含在内。我已经...

Angular2 组件 p-multiSelect Primeng

在模板user.component.html中我使用Primeng的组件 在模板 user.component.html 中我使用 Primeng 的组件 <p-multiSelect name="roles_id" [(ngModel)]="selectedRoles" [options]="user.roles"></p-multiSelect> 加载输入数据时，如何显示选定的值 这段代码在user.component.ts中 export class UserComponent implements OnInit { private selectedStores: string[]; constructor(private roleService: RoleService){ this.roleService.getRoleList().subscribe(response => {this.user.roles=response.body.data.map(function(value){ return {label:value.name, value: value.id}; }) }) this.selectedRoles=['1','2']; } ngOnInit() { this.user={ roles: [], }; } } 但是在界面多选中显示 null,null ，如果我单击多选所选的两个项目。如何显示标签而不是 null,null ？ 如果您将 primeng 升级到版本 ^4.0.0 就可以了 例如，您是否尝试在 console.log 中显示生成的 user.roles？ 如果标签显示为空，则选项对象有问题。它必须是对象键/值的数组，以便您可以迭代它并在组件中显示。这是我正在从事的一个项目中的一个例子： columns = [ { value: 'id', label: 'ID' }, { value: 'comment', label: 'Comments' }, { value: 'updated_at', label: 'Last Update' }, { value: 'enabled', label: 'Enabled' } ]; 显然，您正在为用户对象分配一个空数组，这可能会覆盖构造函数中先前的定义。构造函数在 ngOnInit 之前运行。 您可以将 user.roles 初始化为空并在 ngOnInit() 中为其分配数据。 希望有帮助。 有趣的是，通过你的问题我找到了解决方案。我的问题是创建一个数据表，并在选择一行时显示已分配的用户角色。所以我会为你分解它。希望它能帮助你弄清楚你的。 我的员工模型 export interface IStaff { staffId: number; userRoles: string[]; } 选择角色 export class UserComponent implements OnInit { staff: IStaff; staffRoles: SelectItem[]; selectedRoles: string[] = []; tempRoles: string[] = []; constructor(private roleService: RoleService){} ngOnInit() { this.roleService.getRoleList().subscribe(response=> { let tempRoles: IStaff[]; this.staffRoles = []; tempRoles = response; tempRoles.foreach(el => { this.staffRoles.push({ label: el.name, value: el.id }); }); }); staff.userRoles.forEach(el => { let value: any = el; this.tempRoles.push(value.roleName); this.selectedRoles = this.tempRoles; }); // then set the tempRoles back to null to prevent readding the existing roles this.tempRoles = []; } } 这应该可以工作 <p-multiSelect name="roles_id" [(ngModel)]="selectedRoles" [options]="staffRoles"></p-multiSelect>

自动完成 - PrimeNG

当primeNg AutoComplete组件超过一定宽度时，如何添加水平滚动？尝试过 溢出：自动； 但它只增加了垂直滚动。 .p-自动完成面板{ 最大宽度：15vw...

无法使用 PrimeNg FileUpload 组件显示不支持的文件格式的不同消息

我正在使用PrimeNg的FileUpload组件，并且我只接受PDF格式上传。所以我有一个场景，例如我有 3 个文件 FileA.doc、FileB.pdf、FileC.doc。所以我有3个

primeNG 可排序 <p-table not loading if user clicked sort first

我有一个 我有一个 https://stackblitz.com/edit/primeng-tablesort-demo-sr8pbj?file=src%2Fapp%2Fapp.component.ts 如果页面加载后您做的第一件事是单击按钮，它将加载表格并显示数据（按预期工作），但是如果您重新加载页面并首先单击任何列的排序图标，然后单击按钮，数据未显示在表中。 数据实际上被加载到分配给[value]的数组中，但没有渲染。 示例中的注释实际上有一个解决方法。 问题的重点是确定导致错误的原因。是 .push 方法中的东西吗？ primeng中有什么东西吗？或者像在将元素附加到数组时无法检测到数组已更改之类的角度？我倾向于最后一个，但不知道如何进一步追踪它，也不知道如何解释行为的差异 - 首先单击排序时。 实际上，您遇到的行为取决于 JavaScript push 方法和 Angular 中的 @Input 属性机制。 首先，关于JavaScript中的push方法： 使用 push 方法的结果取决于您推入数组的数据类型。当您推送对象或数组时，JavaScript 会添加对原始对象或数组的引用。但是，对于数字或布尔值等基本类型，JavaScript 会推送值的副本。这种区别至关重要，因为它会影响推送元素的更改如何反映在原始数组中。要更深入地研究这个主题，您可以浏览这篇文章：JavaScript Array.push() 是深拷贝还是浅拷贝？. 其次，关于 Angular 中的 @Input 属性： 在 Angular 中，@Input 属性会在其绑定的数据引用发生变化时检测到变化。当您使用扩展运算符或任何其他创建新数组或对象的方法时，它确实会更改数据的引用。因此，Angular 的变更检测机制应该检测这些变更，并且当产品变更时应该通知组件。 总而言之，您观察到的行为是以下因素的组合： JavaScript 处理 push 以及 Angular 的 @Input 属性如何工作。

Primeng 15 如何覆盖 Angular 15 中的默认排序图标

我在 Angular 15 中使用 Primeng 15.4。你能帮忙覆盖默认图标吗？ 我尝试了以下 2 个解决方案，但没有任何效果 我在 Angular 15 中使用 Primeng 15.4。你能帮忙覆盖默认图标吗？ 我尝试了以下 2 个解决方案，但没有任何效果 <p-sortIcon class="icon" sortAscIcon="pi-sort-up" sortDescIcon="pi-sort-down" sortNoneIcon="pi-sort-alt" [field]="col.field"></p-sortIcon> 和 p-sortIcon class="{'pi pi-arrow-up': sortOrder === 1, 'pi pi-arrow-up': sortOrder === -1, 'pi pi-arrow-up': sortOrder === 0}" [field]="col.field"></p-sortIcon> 您尝试过的方法不起作用，因为它不在 primeng 中：Github 问题。您可以从这里尝试CSS解决方案 您可以像下面这样覆盖它， p-sortIcon { .p-iconwrapper { font-family: 'primeicons', Arial, sans-serif; justify-content: center; font-size: 19px; &:before{ content: '\e900'; /* modify as per your requirement */ } svg { display: none; } } sortamountupalticon.p-iconwrapper:before { content: '\e900'; /* modify as per your requirement */ } sortamountdownicon.p-iconwrapper:before { content: '\e900'; /* modify as per your requirement */ } } 在上面的例子中，我们使用 primeicons 覆盖图标。您可以根据您的要求进行修改。

Primeng 输入占位符默认不显示，仅在单击后显示

Primeng 输入字段占位符仅在单击后才可见。仅在从 PrimeNg 13 升级到 15 后才会出现此问题。 Primeng 输入字段占位符仅在单击后才可见。仅在从 PrimeNg 13 升级到 15 后才会出现此问题。 <input type="text" placeholder="Some text" /> 通过添加不透明度解决了这个问题 .p-float-label { input { &::placeholder { opacity: 1; } } }

在 PrimeNG 树节点上显示节点索引

由于 PrimeNG 的 p-tree 无法使用 rowIndex。 如何使用 ng-template 显示/获取每个节点的节点索引。 有什么解决办法吗？

Angular：primeng 中的样式即使列在 styles.scss 中也不起作用

我已将 primeng 添加到我的 Angular 项目中。但样式不起作用。 我已将样式放入 style.scss 和 angular.json 中。但我总是做服务它不起作用 我的styles.scss： @导入'../

如何从Primeng 11.0.1升级到最新版本？

无法升级，出现这么多错误。 我尝试了这个命令，但它不起作用： npm 更新 primeng --save 遗憾的是，这个命令并没有产生预期的结果。我正在寻找一个全面的...

日期+时间到角度2中的时间戳

我想制作一个类似谷歌日历的日程安排应用程序。 我决定使用 PrimeNG。日历的输出格式为 2016-01-16T16:00:00 我想要与之交互的 API 使用时间戳。 我尝试...

设置表值时方法和类字段的区别

我遇到了一个问题，无法从表格中选择和复制文本，因为每次单击表格时都会刷新并呈现表格。当我更改版本一时，我使用该方法设置

如何设置 PrimeNg 组件的样式？

所以我在当前的项目中使用 PrimeNg Liberary 并尝试设置该库的组件样式，但问题是我们无法使用普通的 css 类设置这些组件的样式，所以......

没有工具栏的primeng编辑器

如何关闭 primeNG 编辑器上的工具栏？ 我正在获取编辑器 (onInit) 的编辑器实例。然而下面的似乎不起作用。 我从 quilljs 看到的例子似乎都......

Angular 通用的 handleStatus 函数和 Primeng Message 奇怪的行为

我正在尝试像这样显示以下组件： 我正在尝试像这样显示以下组件： <p-messages [(value)]="messages" [enableService]="toastEnabled" [closable]="false" ></p-messages> 其中 toastEnabled 和 messages 都是在我的产品组件中声明的变量，如下所示： export class ProductsComponent { cart$: Observable<Product[]> = this.store .select(selectCart) .pipe(tap((cart) => console.log(cart))); messages: Message[] = []; toastEnabled: boolean = false; products$: Observable<Product[]> = this.store .select(selectProducts) .pipe(tap((products) => console.log(products))); constructor( private walmartService: WalmartService, private store: Store<IAppState> ) {} private handleViewStatusAndToast<T>( selector: MemoizedSelector<IAppState, T>, descriptor: string ): void { const status$ = this.store.select(selector).pipe( skipWhile((status) => status !== FetchStatus.Loading), take(2) ); status$ .pipe(find((status) => status === FetchStatus.Loading)) .subscribe(() => { this.toastEnabled = true; this.messages = [ { severity: 'warn', summary: 'Loading', detail: `${descriptor} is loading...`, }, ]; }); status$ .pipe(find((status) => status === FetchStatus.Success)) .subscribe(() => { this.toastEnabled = true; this.messages = [ { severity: 'success', summary: 'Success', detail: `Successfully loaded ${descriptor}!`, }, ]; }); status$ .pipe(find((status) => status === FetchStatus.Failure)) .subscribe((error) => { this.toastEnabled = true; this.messages = [ { severity: 'error', summary: 'Error', detail: 'Error...' }, ]; }); } ngOnInit(): void { this.handleViewStatusAndToast(selectCartStatus, 'cart'); this.store.dispatch({ type: '[Products Component] Load Products' }); this.store.dispatch({ type: '[Cart Component] Load Cart' }); } 消息组件与文本一起显示，但它的颜色是红色，消息是“错误...”，这是最后的状态，这是不可能的，因为数据也在显示，所以不可能发生错误. 有人知道为什么吗？ 旁注 - 有人知道这是不是 Primeng 是我应该关注的组件库吗？我刚刚回到 Angular，想知道我是否应该花时间学习另一个 Angular 首先，Observables 不是这样工作的。 但别担心，我在这里解释你应该如何重构你的handleViewSta...函数。 订阅 首先，当您订阅代码中的任何可观察对象时。除非有事件触发完成事件，否则订阅不会结束。 这意味着当你订阅一个 observable 时，你不愿意多次订阅同一个 observable。 异步 不要忘记可观察量是异步的。 async/await 与 observables 与 Promise 您的代码 这意味着您的函数不应多次订阅可观察的状态，因为您不想检索可能的不同状态，而只想检索每个产品或购物车或任何其他对象的一个状态。 skipWhile在这里完全没有意义。 根据 rxjs 文档，SkipWhile 运算符表示您仅返回“正在加载”类型的状态。 const status$ = this.store.select(selector); status$.subscribe((status) => { this.toastEnabled = true; if (status === FetchStatus.Loading) { this.messages = [ { severity: 'warn', summary: 'Loading', detail: `${descriptor} is loading...`, }, ]; } else if (status === FetchStatus.Success) { this.messages = [ { severity: 'success', summary: 'Success', detail: `Successfully loaded ${descriptor}!`, }, ]; } else if (status === FetchStatus.Failure) { this.messages = [ { severity: 'error', summary: 'Error', detail: 'Error...' }, ]; } }); 这是快速编写的代码，可以通过多种方式进行改进（例如使用 switch case，...）。 记住 因为 observable 是异步的，所以你必须确保在加载数据之前进行订阅。 为什么还要观察？ 在您的代码中，我相信您正在尝试加载购物车及其产品。在这种情况下，正如我在异步选项卡中提到的，您愿意使用 Promise。 如果您想使用可观察的，请查看异步管道。它允许您在可观察对象仍在异步检索数据时显示数据。 您真正应该做的只是使用异步管道将我们的数据异步显示到您的视图中。 希望这能有所帮助；）。我强烈建议观看一些 fireship youtube 教程。 （下面有链接） rxjs 可观察值指南 rxjs通过fireship快速启动

Angular Ts [Primeng] 如何让这个 p-calendar 在点击后不自动关闭

当单击按钮时，它只会打开时间日历，但现在的问题是当我单击增加或减少时间时，这将导致自动关闭的问题

如何使用网格系统制作PRIMENG的响应式MenuBar组件？

我正在制作一个响应式网络。我在使用 PrimeNG 的 MenuBar 组件时遇到问题。我想在缩小窗口时使用汉堡模式： 问题是使用 PrimeFlex 的网格系统和 p...