Base solution for your next web application
Open Closed

PrimeNg Tables Errors - Based on Users & Editions #3746


User avatar
0
gbadenhorst created

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'.

  1. If 'p-dataTable' is an Angular component and it has 'value' input, then verify that it is part of this module.
  2. 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.
  3. 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'.
  4. If 'p-dataTable' is an Angular component and it has 'rows' input, then verify that it is part of this module.
  5. 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.
  6. 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'.
  7. If 'p-dataTable' is an Angular component and it has 'paginator' input, then verify that it is part of this module.
  8. 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.
  9. 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)
  • User Avatar
    0
    alper created
    Support Team

    hi

    import DataTableModule for primeng. <a class="postlink" href="https://github.com/primefaces/primeng/issues/1271">https://github.com/primefaces/primeng/issues/1271</a>

  • User Avatar
    0
    fastsoft created

    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>
    
  • User Avatar
    0
    gbadenhorst created

    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

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @fastsoft,

    Did it worked for you as well ?