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 { }
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 ]
In new versions of angular, import TableModule
from primeng/table
.
import { TableModule } from 'primeng/table';
@NgModule({
imports: [
// ...
TableModule,
// ...
]
})
export class AppModule {}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With