primeng 相关问题

我想更改PrimeNG树表的行高

<p-treeTable [value]="files" [columns]="cols" selectionMode="single" [metaKeySelection]="metaKeySelection" [(selection)]="selectedNode" dataKey="name" [scrollable]="true" class="tableStyle ui-treetable-sm"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns"> {{ col.header }} </th> </tr> </ng-template> <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns"> <tr [ttRow]="rowNode" [ttRow]="rowNode" > <td *ngFor="let col of columns; let i = index"> <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler> {{ rowData[col.field] }} </td> </tr> </ng-template> </p-treeTable> 我想将行高调整小，但我做不到。可以增加行高。当前代码视图中无法修改行高，如上图 我想改变行高 使用下面的代码，您可以增加或减少 PrimeNG 树表行的高度。 <p-treeTable [value]="files" [columns]="cols"> <ng-template pTemplate="body" let-rowData="rowData" let-columns="columns"> <tr [ngStyle]="{height: '65px'}"> <td *ngFor="let col of columns;"> {{ rowData[col.field] }} </td> </tr> </ng-template> </p-treeTable> 或者你也可以使用 css 改变高度，如下所示 .p-treetable .p-datatable-wrapper .p-datatable-tbody { height: <row-height>; }

有什么方法可以禁用添加芯片（primeng），但应该可以在角度2中删除

嗨，我正在尝试使芯片输入不可编辑。我正在从其中一个组件获取对象的数据，并使用数据的密钥作为芯片标签。 这是我的html代码 嗨，我正在尝试使芯片输入不可编辑。我正在从其中一个组件获取对象的数据，并使用数据的密钥作为芯片标签。 这是我的html代码 <div class="inputDiv" *ngFor="let k of key"> <div class="inlineclass"> <span class="title">{{k}}</span> <p-chips [(ngModel)]="filterInput[k]" ></p-chips> </div> </div> 这是我从中获取数据的组件 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'itc-upc-itc-component-filter', templateUrl: './itc-component-filter.component.html', styleUrls: ['./itc-component-filter.component.scss'] }) export class ItcComponentFilterComponent implements OnInit { filterInput= { 'size': ['1T', '2T', '3T'], 'status': [ 'in progress','complete', 'pending']}; key= Object.keys(this.filterInput); constructor() { } ngOnInit() { } } 我尝试过禁用 ng primeschips 属性的属性 <p-chips [(ngModel)]="filterInput[k]" disabled="true"></p-chips> 有什么方法可以让这个输入不可编辑，但同时应该能够删除芯片 您应该监听仅允许使用 backspace 和 delete 键的键盘事件。这样您可以删除但不能添加字符。 HTML： <span *ngIf="filterInput[k]" class="title">{{k}}</span> <p-chips (keydown)="onChange($event)" [(ngModel)]="filterInput[k]" ></p-chips> 打字稿 onChange(event){ if (!(event.keyCode == 8 || event.keyCode == 46)){ return false } } 演示 Angular + Lodash <p-chips [(ngModel)]="chips" (keydown)="onChangeChips($event)"></p-chips> import {BACKSPACE, DELETE} from '@angular/cdk/keycodes'; import * as _ from 'lodash'; onChangeChips(event) { return _.has([BACKSPACE, DELETE], event.code); }

如何应用PrimeNG Editor生成的样式

作为项目要求的一部分，用户需要在PrimeNG编辑器中输入标题，并且他也可以应用不同的样式。我想预览标题在登陆页面上的样子...

使用 p 按钮标签或将名称放在标签之间有区别吗

前端开发对我来说相当新，我想知道使用以下内容是否有什么区别： 和 好的 前端开发对我来说相当新，我想知道使用之间是否有什么区别： <p-button label="OK"></p-button> 和 <p-button>OK</p-button> 如有解释，不胜感激！ 他们都在屏幕上做同样的事情，但是： 第一种方法比第二种更明确，通常被认为是良好的做法。 屏幕阅读器和其他辅助技术肯定可以理解第一种方法，但不太可能所有人都能理解第二种方法。

prime ng p-日历在滚动时在 p-dialog 内关闭

我正在研究 Angular 和 Prime ng 库。我有一个模态框，里面有日历。日历高度不适合模态。因此，当我滚动对话日历时，对话日历就会关闭

Chrome 中不考虑 PrimeNg 表中 th/td 元素的固定宽度（但 Firefox 中会考虑）

我正在使用 PrimeNG 表（v15.4.1），并将样式设置为“冻结”列，即 th 和 td 都设置为以下内容： 最大宽度：40px！重要； 最小宽度：40px！导入...

如何控制 PrimeNG 范围滑块？

我想通过两个输入修改Primeng滑块的值。当滑块不是范围时，它工作正常，我可以从输入控制滑块。然而，当谈到范围时...

如何使用 primeng 过滤日期 mm/dd/yyyy 从 Angular 10 中的文本输入中传递任何数字

我确实在 Turbo 表上使用了 primeng 过滤器，但它不适用于格式为“mm/dd/yyyy”的日期。 *ngIf="col.field === 'abc'" 噗噗噗...

使用 Cypress 访问此 primeNG 表时，无法读取未定义的属性（读取“行”）错误

我们开始使用 primeNG 表，我想创建一个函数，在其中访问表以查看是否存在某些文本元素。但我收到错误无法读取未定义的属性（读取'...

如何在 primeng 中设置日期范围的值

我正在尝试使用 primeng datepick 日历在初始化表单期间设置值，但不起作用。我正在 Angular 8 中工作。我已经使用 primeng 创建了自定义日期选择器组件。我已经给出了我的...

如何增加PrimeNG中pTooltip的宽度

我正在使用 PrimeNG 的工具提示，并尝试在其中包含大量文本时使其更宽，但它没有响应我尝试的任何内容。 我尝试过使用 PrimeNG 的 HTML 属性 tooltipStyleClass...

Angular / Primeng 过滤器向 REST 后端请求导致无限循环

我使用primeng table来处理大数据。为了处理这个问题，我将过滤器发送到 REST 后端并在表中显示结果。但每个过滤器操作最终都会陷入循环。 这是我的服务： 公开

p-menuitem 不是已知元素 - primeng

我是primeng新手，遇到这个困难。当我将 p-menuitem 放入 p-menubar 中时，角度给出以下错误： 'p-menuitem' 不是已知元素： 1. 如果 'p-menuitem' 是一个 Angular

如何根据 Angular/PrimeNG 中的另一个 div 设置 <div> 的 minHeight

在我的 Angular 项目中，我确实有两个容器： 一张折线图 一张信息卡显示数据库中的一些传感器数据。 当浏览器处于全屏模式时，两者都在一行 2 列中。 对于测针...

页面刷新后保存并保留下拉值 PrimeNG

如何在页面刷新后保存并保留PrimeNG下拉项的下拉值？ https://www.primefaces.org/primeng/#/dropdown 超文本标记语言 如何在页面刷新后保存并保留PrimeNG下拉项的下拉值？ https://www.primefaces.org/primeng/#/dropdown HTML <p-dropdown [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"></p-dropdown> TypeScript import {SelectItem} from 'primeng/api'; interface City { name: string; code: string; } export class MyModel { cities2: City[]; selectedCity2: City; constructor() { //An array of cities this.cities2 = [ {name: 'New York', code: 'NY'}, {name: 'Rome', code: 'RM'}, {name: 'London', code: 'LDN'}, {name: 'Istanbul', code: 'IST'}, {name: 'Paris', code: 'PRS'} ]; } ngOnInit(){ localStorage.setItem('key', this.selectedCity2); const getItem = localStorage('key'); this.selectedCity2 = getItem; } 这个问题已经在这里得到解答 https://stackoverflow.com/a/77264800/15563603 另外，它是使用一个服务文件，将 ngOnDestroy 处的下拉列表的值设置为该文件并订阅它以获取 ngOnInit 上的数据 首先，要在 localStorage 中设置（或获取）一个 javascript 对象，请使用 JSON.stringify （或 JSON.parse）方法。 然后，在 ngOnInit 方法中，您应该只获取存储在 localStorage 中的值，并且不能像代码中那样更新它。 所以这个方法就变成了： ngOnInit() { // get localStorage value this.selectedCity2 = JSON.parse(localStorage.getItem('key')); } 最后，每次您在 dropdown 元素中选择一个项目时，您都必须像这样更新它在 localStorage 中的值： saveInLocalStorage() { // update localStorage value localStorage.setItem('key', JSON.stringify(this.selectedCity2)); } 参见StackBlitz

将 Tailwindcss 添加到项目后，Primeng 无法正常工作

我尝试使用 tailwindcss 和 primeng 创建一个项目。但是导入Tailwind后，Primeng的样式不再适用 我尝试使用 Tailwind 前缀选项，但很快...

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 中引用的部分包含在内。我已经...