primeng 相关问题

Angular 2 ng对于 prime-ng 数据列表中的不同类型

我有一个“any”类型的数组，其中填充了动态数据： 让历史记录：任何= []； History.push({ grouped_date: "第12周", isHeader: true }); 历史记录.push({ 活动: ...

Primeng 延迟加载在更新 sortField 和 sortOrder 时多次触发？

我已经在我的 primeng-table 上实现了延迟加载， 我已经在我的 primeng-table 上实现了延迟加载， <p-table #dataTable [columns]="tableHeader" [value]="tableData" [rows]="10" [paginator]="true" [rowsPerPageOptions]="rowsPerPage" [totalRecords]="totalRecords" [sortField]="sortField" [sortOrder]="sortType" rowHover="true" [lazy]=true (onLazyLoad)="loadLazy($event)"> 用户可以通过值选择来更改列（通过 API 调用处理）。问题是，如果我更新 sortField 和 sortOrder API 会触发两次。 this.dataTable.sortField = obj.sortField; this.dataTable.sortOrder = obj.sortType; this.loadTableData(); // this method is triggered to fetch the API data. 通过上面的代码，我不想多次触发loadLazy方法。 所以，我尝试了以下代码， this.dataTable.lazy = false; this.dataTable.sortField = obj.sortField; this.dataTable.sortOrder = obj.sortType; this.loadTableData(); // this method is triggered to fetch the API data. this.dataTable.lazy = true; 但是如果我将惰性设置为 false 和 true，则分页不会显示。？你们能建议我哪里出了问题吗？ 我的猜测是 [sortField]="sortField" [sortOrder]="sortType" 不适用于惰性模式，因为它确实会触发 onLazyLoad 事件！ 因此，如果我必须提供一个解决方案，我会尝试使用可以同时处理所有过滤、排序和页面参数的事件。 这意味着获取 p-table 的 ViewChild 并触发 onLazyLoad 事件。 当你读到这篇文章时： https://github.com/primefaces/primeng/blob/master/src/app/components/table/table.ts 你看到可以发送整套参数了。 无论如何，我会自己尝试一下:) 干杯。 -------------- 编辑 --------------- 这实际上按预期工作，这非常好，所以你可以像这样检索你的表： import { Table } from 'primeng/table'; @ViewChild(Table) table!: Table; 然后你发出事件，它会被你自己的回调方法捕获，就像这样: somemethod(): void { this.table.onLazyLoad.emit({ sortField: 'designation', sortOrder: -1 }) } 但请注意，省略的参数不会自动从表的实际状态中检索，您需要对它们进行赋值。 一旦你这样做了： <p-table [sortField]="sortField" [sortOrder]="sortType" [lazy]=true (onLazyLoad)="loadLazy($event)"> 您不应更新 sortField 或 sortType 字段，因为更新这些字段中的每一个都会触发 onLazyLoad 事件。 另一种方法是创建两个单独的字段并在 loadLazy($event) 方法内更新它们。例如： sortFieldCopy: string; sortTypeCopy: number; loadLazy($event: TableLazyLoadEvent) { this.sortFieldCopy = $event.sortField; this.sortTypeCopy = $event.sortOrder; // fetch data }

Primeng - TieredMenu 未显示，似乎是空的

我的组件： ngOnInit(): 无效 { this.translateService.setDefaultLang('fr'); // 默认语言 this.translateService.use('fr'); // 使用语言选择 this.accountService.

PrimeNG 数据表自定义 css

我想在我的角度项目中设置数据表标题的样式。我在我的项目中使用 PrimeNG 组件。但我无法设计它们。它不会覆盖样式。 我尝试了这个素数的解决方案...

primeng p-checkbox 失去价值，但 ngModel 是相同的

使用 primeNg v12，我在 ng-template 中有这个 p-checkbox（home 来自 let-history） 使用 primeNg v12，我将这个 p-checkbox 放在 ng-template 中（家来自 let-history） <p-checkbox #homeSelection [value]="history.home" (click)="$event.stopPropagation();" [(ngModel)]="checkedHomes"> </p-checkbox> #homeSelection 声明为 @ViewChildren('homeSelection') homeSelection: QueryList<Checkbox>; 当我选择一个表行时，表数据会重新加载，并且所有以前的复选框选择都会丢失，但checkedHomes不会改变，所以我不知道如何“重新分配”每个值，就像选择该行之前一样（为什么有双向 ngModel 如果它没有在表刷新时自动同步并分配正确的值？） 我也一直在使用 ChangeDetectorRef，但是每次都会重置 p-checkbox 值属性 有什么建议吗？ 有同样的问题 大家有解决办法吗

文件上传：指定文件类型在移动设备上不起作用

我在 PrimeNg 项目中使用 FileUploadModule，并且编写了以下代码： 我尝试过不同的移动浏览器（在...

PrimeNg 上传按钮：指定文件类型在移动设备上不起作用

我在 PrimeNg 项目中使用 FileUploadModule，并且编写了以下代码： 我尝试过不同的移动浏览器（在...

使用自定义 uploadHandler 时，PrimeNG 文件上传进度不会更新

我正在尝试使用 PrimeNG 文件上传组件 但我正在上传到 API，因此我使用自定义 uploadHandler，如下所示： 我正在尝试使用 PrimeNG 文件上传组件 但是我正在上传到 API，因此我使用自定义 uploadHandler，如下所示： <p-fileUpload #fileUpload name="fileUpload" (uploadHandler)="uploadHandler($event)" customUpload="true" fileLimit="5" multiple="multiple" accept="image/*" maxFileSize="1000000"> </p-fileUpload> 使用 component.ts 调用以下内容： uploadedFiles: any[] = []; @ViewChild('fileUpload') fileUpload: any; constructor(private wpService: WordpressService, private cd: ChangeDetectorRef) {} async uploadHandler(event) { console.log(this.fileUpload) this.fileUpload.disable = false; this.fileUpload.progress = 5; this.fileUpload.onProgress.emit({progress: this.fileUpload.progress}); this.cd.detectChanges(); this.uploadedFiles = []; const perFilePercent = 95 / event.files.length; this.fileUpload.disable = true; for (const f of event.files) { await this.wpService.uploadFile(f).then(response => { const thisFile = f; thisFile.id = response.id; thisFile.url = response.source_url; this.fileUpload.progress += perFilePercent; this.fileUpload.onProgress.emit({progress: this.fileUpload.progress}); this.cd.detectChanges(); this.uploadedFiles.push(thisFile); }); } this.fileUpload.files = []; this.cd.detectChanges(); } 问题是，即使我试图通过执行 this.fileUpload.progress += perFilePercent; AND this.fileUpload.onProgress.emit({progress: this.fileUpload.progress}); 来强制进度手动更改，但什么也没有发生。 奇怪的是，如果我将进度条组件绑定到 this.fileUpload.progress 的值，它将更新。 例如： <p-progressBar [value]="fileUpload.progress" [showValue]="false"></p-progressBar> 使行为按预期工作，而实际文件上传组件内的进度条停止并且在第一次调用后不会更新。 此行为的视频：https://bitz.rocks/ftp/3HJvut0t6p.mp4 我觉得我在设置 viewchild 值或事件发射器的行中做错了什么，但我不知道出了什么问题，也不知道我应该做什么。 我知道这是一篇旧帖子，但我今天有一个类似的任务，这就是我解决它的方法。 /*before constructor*/ totalPercent = 0; percentDone: number; @ViewChild('primeFileUpload') primeFileUpload: FileUpload; private percentDonePerFile: number; async fileUpload($event) { if ($event && $event.files) { this.totalPercent = $event.files.length * 100; this.percentDone = 0; console.log('uploading..'); let sub; let i = 1; for (const file of $event.files) { const path = '/my/super/path'; sub = this.docService.percentSub.subscribe(perc => { this.percentDonePerFile = perc; this.percentDone = (i - 1) * 100 + this.percentDonePerFile; console.log('emitting: ' + (this.percentDone / this.totalPercent * 100)); this.primeFileUpload.onProgress.emit(this.round(this.percentDone / this.totalPercent * 100)); }); const dummyEvent = {srcElement: {files: [file]}}; await this.docService.uploadFile(dummyEvent, path); this.percentDone = i * 100; this.primeFileUpload.onProgress.emit(this.round(this.percentDone / this.totalPercent * 100)); console.log('emitting: ' + (this.percentDone / this.totalPercent * 100)); sub.unsubscribe(); i++; } } } progressReport($event: any) { this.primeFileUpload.progress = $event; } 我的 html 文件很简单： <p-fileUpload customUpload="true" #primeFileUpload multiple="true" (onProgress)="progressReport($event)" accept="image/*" maxFileSize="2000000" (uploadHandler)="fileUpload($event)"></p-fileUpload> 它可能会对某人有所帮助！ 祝你有美好的一天 这对我有用，因为 API 已更改。 HTML <div class="card flex justify-content-center"> <p-toast /> <p-fileUpload #fileUploaderForm name="demo[]" [multiple]="false" customUpload="true" (uploadHandler)="handleFileUpload($event, fileUploaderForm)" (onProgress)="onProgress($event, fileUploaderForm)"> <ng-template pTemplate="content"> <ul *ngIf="uploadedFiles.length"> <li *ngFor="let file of uploadedFiles"> {{ file.name }} - {{ file.size }} bytes </li> </ul> </ng-template> </p-fileUpload> </div> TS/JS uploadedFiles: any[] = []; constructor(private messageService: MessageService) { } async handleFileUpload(event: FileUploadHandlerEvent, fileUploadForm: FileUpload) { console.log('handle file upload', event, fileUploadForm); try { const result = await uploadData({ path: `upload/${event.files[0].name}`, data: event.files[0], options: { onProgress: (progress) => { const progressPct = Math.round(progress.transferredBytes / progress.totalBytes! * 100) fileUploadForm.onProgress.emit({ originalEvent: undefined!, progress: progressPct }); } } }).result; this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File Uploaded', life: 3000 }); fileUploadForm.clear(); this.uploadedFiles.push(event.files[0]); } catch (error) { console.log('Error : ', error); } } onProgress(event: FileProgressEvent, fileUploadForm: FileUpload) { fileUploadForm.progress = event.progress; }

如何重置p日历中的[maxDate] [minDate]

问题描述 我正在我的 Angular 应用程序中使用 PrimeNG 的 p-calendar 组件。我有两个日期选择器：一个用于选择开始日期，另一个用于选择结束日期。结局...

PrimeNG 自定义上传功能

我有一个由 PrimeNG UI 框架支持的角度形式。我删除了上传按钮，因为我需要整个上传逻辑仅在点击“上传进度”按钮时触发。我怎么还能这样

如何修改 PrimeNg pTooltip 指令以停止监听 Escape 按钮

我有一个 1000 行的列表，每一行都有 pTooltip。 文字 当我...

如何创建自定义可重用组件以在 Primeng Table 中显示空消息？

我在项目中使用 primeng 表，并且尝试创建一个自定义可重用组件，以在没有可用数据时显示空消息。所以，在我的组件中，如果我有以下代码，那么它是......

将 p-面板菜单图标移至右侧

我尝试在primeng中使用面板菜单。 但我想要右侧的箭头图标。像这样....

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

我正在尝试实现primeng的数据表过滤器。 我的代码如下： 我正在尝试实现primeng的数据表过滤器。 我的代码如下： <p-column field="time" header="Time" [filter]="true" filterPlaceholder="&#xf0b0;"> <ng-template pTemplate="filter"> <p-multiSelect [options]="time"></p-multiSelect> </ng-template> </p-column> 但它显示错误：无法绑定到“选项”，因为它不是“p-multiSelect”的已知属性。 您需要在 module.ts 下的 imports 下导入 import {MultiSelectModule} from 'primeng/primeng'; ' imports: [ MultiSelectModule ] 您需要安装 Angular CDK。使用 npm install @angular/cdk --save 命令。 使用在 yourModule.module 中导入多选模块 import {MultiSelectModule} from 'primeng/multiselect'; 首先我必须使用下一个命令安装 Angular cdk： npm install @angular/cdk --save 然后我必须手动编写导入的两行代码（由于某种原因，没有自动完成），但第一次启动后，所有内容都成功编译并工作。 import { MultiSelectModule } from 'primeng/multiselect'; (...) imports:[ MultiSelectModule ] 您可以从他们的官方文档中阅读有关 MultiSelect 的更多信息： https://primefaces.org/primeng/showcase/#/multiselect 我有同样的错误，我在“p-multiSelect”中输入了小写“s”。 错误： <p-multiselect [options]="tidList"> </p-multiselect> 正确： <p-multiSelect [options]="tidList"> </p-multiSelect>

PrimeNG 订单列表无法通过 primeNG splitter 调整大小

我在 primeNG 拆分选项卡内有一个 primeNG 订单列表。不幸的是，订单列表包含一些相当长的字符串，这导致拆分器无法调整选项卡的大小。它达到了它的极限...

在 PrimeNG 中，如何将 p-dropdown 选定值绑定到表单控件？

我正在使用 Angular 13 和 PrimeNG 13。我想将下拉列表绑定到表单控件。 在我的编辑表单中，我使用像这样的 我正在使用 Angular 13 和 PrimeNG 13。我想将下拉菜单绑定到表单控件。 在我的编辑表单中，我使用像这样的<p-dropdown> <p-dropdown [options]="clients" placeholder="Select a Client" optionLabel="name" [(ngModel)]="editClientObj" dataKey="clientId" formControlName="clientId"></p-dropdown> 我的“选项”值是一个看起来像这样的对象数组... [{name: 'Mike', clientId: 3}, { ... }] 在我的服务文件中，我触发了使用正确值设置表单的函数 edit(obj:ClientOrder){ this.editClientObj = obj; ... this.form = this.formbuilder.group({ ... clientId: [obj.clientId, Validators.required] }); 但是，当我提交表单时，表单控件的 clientId 字段被设置为对象：{name: 'Mike', customerId: 3}，而不仅仅是 ID。 如何调整我的 <p-dropdown> 使其仅绑定 ID 而不是整个对象？ 您可以使用 optionValue 输入绑定来选择 id 值 <p-dropdown [options]="clients" placeholder="Select a Client" optionLabel="name" [(ngModel)]="editClientObj" dataKey="clientId" optionValue="clientId" formControlName="clientId"></p-dropdown> 注意： 您不应将反应式表单和模板驱动表单混合在一起。 了解更多信息 Prime Ng 官方文档 HTML代码： <form [formGroup]="form"> <p-dropdown [options]="clients" [autoDisplayFirst]="false" optionLabel="name" formControlName="selClient" optionValue="clientId"> </p-dropdown> </form> .ts组件代码： export class DropdownBindingComponent implements OnInit { clients: Client[]; form: FormGroup = new FormGroup({}); constructor(private fb: FormBuilder) { this.clients = [ { name: 'Mike', clientId: 3 }, { name: 'George', clientId: 4 }, { name: 'Steph', clientId: 5 } ]; } ngOnInit(): void { this.form = this.fb.group({ selClient: [null, Validators.nullValidator] }) this.form.valueChanges.subscribe((data) => { console.log("data change", data['selClient']);//output 3,4 or 5 }) } }

登录用户数据持久化

我不明白我在这个实现中做错了什么。因此，我正在登录并为用户传递正确的凭据。提交凭据后，它将调用服务器验证...

p-fileUpload 不能多次工作 primeng

我会尝试解释这个组件发生了什么，我已经这样定义了组件 我会尝试解释这个组件发生了什么，我已经这样定义了组件 <p-fileUpload #fileUpload accept=".csv,.txt" maxFileSize="1000000" customUpload="true" (uploadHandler)="uploadFile($event)"> 在我的 Json 包上我有这个 "primeng": "^4.1.0-rc.3" 并且在js文件中有这个方法 uploadFile(event) { for (let file of event.files) { this.uploadedFiles.push(file); } this.uploadFileService.doSomething(this.uploadedFiles[0]).subscribe(x => { this.fileInfo = x; ..do some stuff.. }); } 第一次按预期工作（显示组件选择、上传和取消的 3 个按钮），让我从弹出窗口中选择文件，并且该过程继续调用 uploadFile 方法；问题是，一旦完成，如果我尝试再次上传相同的文件，它不允许我这样做。 它只允许我选择文件，但上传按钮永远不会启用，当然，uploadFile 方法永远不会被调用。但如果我选择与之前不同的另一个文件，它会按预期工作，这意味着调用 uploadFile 方法。 我正在使用 this.fileUpload.clear(); 只是为了清除向用户显示上传文件的部分 有什么建议吗？ 我想这个问题可能已经解决了，但是为了供开发者将来参考，请在下面找到解决方案。 解决方案及说明请参考：GitHub: primefaces/primeng#4018 请将模板变量传递给组件，然后使用该变量进行清除。 例如： HTML 文件： <p-fileUpload #fileUpload accept=".csv,.txt" maxFileSize="1000000" customUpload="true" (uploadHandler)="uploadFile($event,fileUpload)"> 组件文件： uploadFile(event,fileUpload) { for (let file of event.files) { this.uploadedFiles.push(file); } this.uploadFileService.doSomething(this.uploadedFiles[0]).subscribe(x => { this.fileInfo = x; ..do some stuff.. }); fileUpload.clear(); // this will clear your file } 这有效。 Html：（做一个参考，即#fileUpload） <p-fileUpload #fileUpload mode="basic" name="upload[]" maxFileSize="1000000" (onSelect)="onFileChange($event)" chooseLabel="Upload" auto="auto"></p-fileUpload> TS：（使用参考进行操作）： @ViewChild('fileUpload') fileUpload: any; 需要清除文件上传时调用clear方法并执行以下操作： clear(){ this.fileUpload.clear(); } 并且 onFileChange($event) 将照常工作，如下所示： onFileChange(event) { for(let file of event.files) { this.customUploadedFiles.push(file); } } 我发现使用“this.fileUpload.clear()”有问题。将 'this.fileUpload.clear()' 替换为以下代码。 this.fileUpload.files.forEach((value, index) => { this.fileUpload.files.splice(index, 1); });

Angular PrimeNG 修改 p-button、p-inputSwitch 样式

如果 ng::deep 已弃用，如何修改 PrimeNG 的 p-button、p-inputSwitch 样式？

如何在 primeng 表中的新表单控件上启动行编辑模式？

我有一个 primeng 表，它从表单数组中获取数据。 我想以编程方式在该表单数组的新表单控件上启动行编辑模式。 我一直在尝试使用这个功能，但我不...