Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't bind to 'value' since it isn't a known property of 'p-dataTable'

I'm developing aspnetzero application with angular but when I'm assigning value of categories property in p-dataTable I'm getting this error in browser console:

Can't bind to 'value' since it isn't a known property of 'p-dataTable'

I have three files. First file categories.component.ts

    import { Component, Injector, OnInit } from '@angular/core';
    import { AppComponentBase } from '@shared/common/app-component-base';
    import { appModuleAnimation } from '@shared/animations/routerTransition';


    import { Http, Response, Headers, RequestOptions } from "@angular/http";
    import { AppSessionService } from '@shared/common/session/app-session.service';
    import { Category } from './category';
    import { DataTableModule, SharedModule, DataTable } from 'primeng/primeng';


    @Component({
        templateUrl: './categories.component.html',
        animations: [appModuleAnimation()]
    })
    export class CategoriesComponent extends AppComponentBase implements OnInit {

        categories: Category[];

        constructor(
            injector: Injector,
            private http: Http,
            private appSessionService: AppSessionService
        ) {
            super(injector);
        }

        ngOnInit(): void {
            this.getCategories();
        }

        getCategories(): void {

            let headers = new Headers({ 'Content-Type': 'application/json' })
            headers.append('tenantId', this.appSessionService.tenant ? this.appSessionService.tenant.id.toString() : '-1');
            let options = new RequestOptions({ headers: headers });
            this.http.get('/api/categories', options).subscribe(values => {
                this.categories = values.json();
            });
        }
    }

Second categories.component.html

          <div [@routerTransition]>
           <div class="row margin-bottom-5">
              <div class="col-xs-12">
                  <div class="page-head">
                      <div class="page-title">
                          <h1>
                             <span>{{l("Categories")}}</span>
                         </h1>
                     </div>
                  </div>
              </div>
           </div>

        <div class="portlet light margin-bottom-0">
            <div class="portlet-body">
                <p-dataTable [value]="categories">
                    <p-column field="category.Name" header="Category"></p- column>
                </p-dataTable>
            </div>
        </div>
    </div>

and Category class

    export class Category {
        constructor(
            public id: number,
            public name: string) { }
    }

This is app.module.ts

import { NgModule } from '@angular/core';
import * as ngCommon from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { ModalModule, TooltipModule, TabsModule } from 'ngx-bootstrap';
import { FileUploadModule } from '@node_modules/ng2-file-upload';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/layout/header.component';
import { HeaderNotificationsComponent } from './shared/layout/notifications/header-notifications.component';
import { SideBarComponent } from './shared/layout/side-bar.component';
import { FooterComponent } from './shared/layout/footer.component';
import { LoginAttemptsModalComponent } from '@app/shared/layout/login-attempts-modal.component';
import { ChangePasswordModalComponent } from '@app/shared/layout/profile/change-password-modal.component';
import { ChangeProfilePictureModalComponent } from '@app/shared/layout/profile/change-profile-picture-modal.component';
import { MySettingsModalComponent } from '@app/shared/layout/profile/my-settings-modal.component';
import { SmsVerificationModalComponent } from '@app/shared/layout/profile/sms-verification-modal.component';
import { AbpModule } from '@abp/abp.module';
import { UtilsModule } from '@shared/utils/utils.module';
import { AppCommonModule } from './shared/common/app-common.module';
import { ServiceProxyModule } from '@shared/service-proxies/service-proxy.module';
import { ImpersonationService } from './admin/users/impersonation.service';
import { LinkedAccountService } from './shared/layout/linked-account.service';
import { LinkedAccountsModalComponent } from '@app/shared/layout/linked-accounts-modal.component';
import { LinkAccountModalComponent } from '@app/shared/layout/link-account-modal.component';
import { NotificationsComponent } from './shared/layout/notifications/notifications.component';
import { NotificationSettingsModalCompoent } from './shared/layout/notifications/notification-settings-modal.component';
import { UserNotificationHelper } from './shared/layout/notifications/UserNotificationHelper';
import { ChatBarComponent } from './shared/layout/chat/chat-bar.component';
import { ChatFriendListItem } from './shared/layout/chat/chat-friend-list-item.component';
import { ChatSignalrService } from '@app/shared/layout/chat/chat-signalr.service';
import { QuickSideBarChat } from '@app/shared/layout/chat/QuickSideBarChat';
import { DataTableModule } from 'primeng/primeng';
import { PaginatorModule } from 'primeng/primeng';

@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        HeaderNotificationsComponent,
        SideBarComponent,
        FooterComponent,
        LoginAttemptsModalComponent,
        LinkedAccountsModalComponent,
        LinkAccountModalComponent,
        ChangePasswordModalComponent,
        ChangeProfilePictureModalComponent,
        MySettingsModalComponent,
        SmsVerificationModalComponent,
        NotificationsComponent,
        ChatBarComponent,
        ChatFriendListItem,
        NotificationSettingsModalCompoent
    ],
    imports: [
        ngCommon.CommonModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        ModalModule.forRoot(),
        TooltipModule.forRoot(),
        TabsModule.forRoot(),
        FileUploadModule,
        AbpModule,
        AppRoutingModule,
        UtilsModule,
        AppCommonModule.forRoot(),
        ServiceProxyModule,
        DataTableModule,
        PaginatorModule
    ],
    providers: [
        ImpersonationService,
        LinkedAccountService,
        UserNotificationHelper,
        ChatSignalrService,
        QuickSideBarChat
    ]
})
export class AppModule { }
like image 613
redux17 Avatar asked Nov 15 '17 00:11

redux17


2 Answers

I had the same error. But my If was different.If you are using custom html tags, ie some libraries, then it will report that Template parse errors. You can fix it by add CUSTOM_ELEMENTS_SCHEMA in your module.

Import it

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

And add it to schemas in your module

 schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
like image 170
Pran R.V Avatar answered Sep 28 '22 07:09

Pran R.V


In new versions of angular, import TableModule from primeng/table.

import { TableModule } from 'primeng/table';

@NgModule({    
   imports: [
   // ...
   TableModule,
   // ...
   ]
})
export class AppModule {}
like image 44
Mohammed Osman Avatar answered Sep 28 '22 07:09

Mohammed Osman