Hi,
I have been busy with trying to redevelop a system i created with Jtables and the PrimeNg tables are giving me nightmares through and through.
I have now tried to implement a basic table with 2 columns and a query based on both GetEditions & GetUsers and with both concepts and table designs which range from having pagination and only display data with a record count i have yet to be able to get the PrimeNg grids to work.
So far based on the posts that i have read everything is in place and there should not be any problems with dropping in the html structure and linking the correct method/function to the pagination or just the loading.
the error i received is this: ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'value' since it isn't a known property of 'p-dataTable'.
- If 'p-dataTable' is an Angular component and it has 'value' input, then verify that it is part of this module.
- If 'p-dataTable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the <a href="mailto:'@NgModule.schemas">'@NgModule.schemas</a>' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the <a href="mailto:'@NgModule.schemas">'@NgModule.schemas</a>' of this component. ("le #dataTable (onLazyLoad)="getItems()" [ERROR ->][value]="primengDatatableHelper.records" rows="{{primengDatatableHelper"): ng:///MainModule/ItemComponent.html@41:29 Can't bind to 'rows' since it isn't a known property of 'p-dataTable'.
- If 'p-dataTable' is an Angular component and it has 'rows' input, then verify that it is part of this module.
- If 'p-dataTable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the <a href="mailto:'@NgModule.schemas">'@NgModule.schemas</a>' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the <a href="mailto:'@NgModule.schemas">'@NgModule.schemas</a>' of this component. (" [value]="primengDatatableHelper.records" [ERROR ->]rows="{{primengDatatableHelper.defaultRecordsCountPerPage}}" [paginator"): ng:///MainModule/ItemComponent.html@42:29 Can't bind to 'paginator' since it isn't a known property of 'p-dataTable'.
- If 'p-dataTable' is an Angular component and it has 'paginator' input, then verify that it is part of this module.
- If 'p-dataTable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the <a href="mailto:'@NgModule.schemas">'@NgModule.schemas</a>' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the <a href="mailto:'@NgModule.schemas">'@NgModule.schemas</a>' of this component. (" rows="{{primengDatatableHelper.defaultRecordsCountPerPage}}" [ERROR ->][paginator]="false" [lazy]="true" emptyMe"): ng:///MainModule/ItemComponent.html@43:29
I have no idea how to get around this and this is a rather urgent problem that i am struggling with.
Is there any one that might know if i am missing something or that i have done wrong?
Regards, Gideon Badenhorst.
4 Answer(s)
-
0
hi
import DataTableModule for primeng. <a class="postlink" href="https://github.com/primefaces/primeng/issues/1271">https://github.com/primefaces/primeng/issues/1271</a>
-
0
I'm getting the same error. I copied xxx\angular\src\app\admin\audit-logs\audit-logs.component.ts and changed own component.
.ts File
import { NgModule } from '@angular/core'; import { Component, AfterViewInit, Injector, ViewEncapsulation, ViewChild } from '@angular/core'; import { NotifyService } from '@abp/notify/notify.service'; import { AppComponentBase } from '@shared/common/app-component-base'; import { appModuleAnimation } from '@shared/animations/routerTransition'; import { DataTable } from 'primeng/components/datatable/datatable'; import { Paginator } from 'primeng/components/paginator/paginator'; import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent'; import { OgrenciServiceProxy, VOgrenciInfo, PagedResultDtoOfVOgrenciInfo, FGetEntityExpression, FSearchExpression } from '@shared/service-proxies/service-proxies'; @Component({ templateUrl: './ogrenci-list.component.html', encapsulation: ViewEncapsulation.None, animations: [appModuleAnimation()] }) export class OgrenciListComponent extends AppComponentBase { @ViewChild('dataTable') dataTable: DataTable; @ViewChild('paginator') paginator: Paginator; ogrenciList: VOgrenciInfo[] = []; searchExp = new FGetEntityExpression(); fSearchExpression = new FSearchExpression(); constructor( injector: Injector, private _ogrenciService: OgrenciServiceProxy, private _notifyService: NotifyService ) { super(injector); this.searchExp.maxResultCount = 20; this.searchExp.skipCount = 0; this.primengDatatableHelper.totalRecordsCount = 0; this.fSearchExpression.propName = "OgrenciId"; this.fSearchExpression.searchOperator = 4; this.fSearchExpression.searchAndOrOperator = 0; this.fSearchExpression.value1 = 4; this.searchExp.expressionList = new Array<FSearchExpression>(); this.searchExp.expressionList.push(this.fSearchExpression); } getOgrenci(event?: LazyLoadEvent) { this.primengDatatableHelper.showLoadingIndicator(); this._ogrenciService.getData(this.searchExp).subscribe(result => { this.ogrenciList = result.items; this.primengDatatableHelper.records = result.items; this.primengDatatableHelper.totalRecordsCount = result.items.length; this.primengDatatableHelper.hideLoadingIndicator(); }); } }
.html file
<div [@routerTransition]> <div class="row margin-bottom-5"> <div class="col-xs-6"> <div class="page-head"> <div class="page-title"> <h1> <span>{{l("Student")}}</span> </h1> </div> </div> </div> <div class="col-xs-6 text-right"> </div> </div> <div class="portlet light margin-bottom-0"> <div class="portlet-body"> <div class="primeng-datatable-container" [busyIf]="primengDatatableHelper.isLoading"> <div class="primeng-paging-container"> <p-paginator rows="{{primengDatatableHelper.defaultRecordsCountPerPage}}" #paginator (onPageChange)="getOgrenci($event)" [totalRecords]="primengDatatableHelper.totalRecordsCount" [rowsPerPageOptions]="primengDatatableHelper.predefinedRecordsCountPerPage"> </p-paginator> <span class="total-records-count"> {{l('TotalRecordsCount', primengDatatableHelper.totalRecordsCount)}} </span> </div> </div> </div> </div> </div>
-
0
Hi,
The import of the following worked for me including the suggested DataTabbleModule:
main.module.ts: import { DataTableModule } from 'primeng/primeng'; import { PaginatorModule } from 'primeng/primeng';
and the adding it to the ngmodule imports.
Thank you!
Regards, Gideon Badenhorst
-
0
Hi @fastsoft,
Did it worked for you as well ?