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

Question

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 { }

Answer 1

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 ]

Answer 2

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

import { TableModule } from 'primeng/table';

@NgModule({    
   imports: [
   // ...
   TableModule,
   // ...
   ]
})
export class AppModule {}