search

brunano21 / angular-4-data-table

An Angular 5 data table, with pagination, sorting, expandable rows, row selection, etc. with basic accessibility support.
MIT License
11 stars 19 forks source link

Can't bind to 'items' since it isn't a known property of 'data-table' #13

Closed AbQayyum closed 6 years ago

AbQayyum commented 6 years ago

Exception details Error: Template parse errors: Can't bind to 'items' since it isn't a known property of 'data-table'.

  1. If 'data-table' is an Angular component and it has 'items' input, then verify that it is part of this module.
  2. If 'data-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<data-table [ERROR ->][items]="items" [itemCount]="itemCount" (reload)="reloadItems($event)" "): ng:///AppModule/ApplistComponent.html@3:0 Can't bind to 'itemCount' since it isn't a known property of 'data-table'.

  1. If 'data-table' is an Angular component and it has 'itemCount' input, then verify that it is part of this module.
  2. If 'data-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <data-table [items]="items" [ERROR ->][itemCount]="itemCount" (reload)="reloadItems($event)"

    "): ng:///AppModule/ApplistComponent.html@4:0 Can't bind to 'property' since it isn't a known property of 'data-table-column'.

  4. If 'data-table-column' is an Angular component and it has 'property' input, then verify that it is part of this module.
  5. If 'data-table-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<data-table-column [ERROR ->][property]="'title'" [header]="'Title'", [sortable]="true", "): ng:///AppModule/ApplistComponent.html@9:0 Can't bind to 'header' since it isn't a known property of 'data-table-column'.

  1. If 'data-table-column' is an Angular component and it has 'header' input, then verify that it is part of this module.
  2. If 'data-table-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <data-table-column [property]="'title'" [ERROR ->][header]="'Title'", [sortable]="true", [resizable]="true" "): ng:///AppModule/ApplistComponent.html@10:0 Can't bind to 'sortable' since it isn't a known property of 'data-table-column'.
  4. If 'data-table-column' is an Angular component and it has 'sortable' input, then verify that it is part of this module.
  5. If 'data-table-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [property]="'title'" [header]="'Title'", [ERROR ->][sortable]="true", [resizable]="true"

    "): ng:///AppModule/ApplistComponent.html@11:0 Can't bind to 'resizable' since it isn't a known property of 'data-table-column'.

  7. If 'data-table-column' is an Angular component and it has 'resizable' input, then verify that it is part of this module.
  8. If 'data-table-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  9. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [header]="'Title'", [sortable]="true", [ERROR ->][resizable]="true"

    "): ng:///AppModule/ApplistComponent.html@12:0 'data-table-column' is not a known element:

  10. If 'data-table-column' is an Angular component, then verify that it is part of this module.
  11. If 'data-table-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]<data-table-column [property]="'title'" [header]="'Title'", "): ng:///AppModule/ApplistComponent.html@8:0 'data-table' is not a known element:

  1. If 'data-table' is an Angular component, then verify that it is part of this module.
  2. If 'data-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

    App list

[ERROR ->]<data-table [items]="items" [itemCount]="itemCount" "): ng:///AppModule/ApplistComponent.html@2:0

my component is import { Component, OnInit } from '@angular/core'; import { DataTableResource } from "angular5-data-table";

@Component({ selector: 'app-applist', templateUrl: './applist.component.html', styleUrls: ['./applist.component.css'] }) export class ApplistComponent implements OnInit { applist:AppList[]; tableResource:DataTableResource items:any[]; itemCount:number; constructor() { this.applist=[ {title:'title 1',category:'one',users:30, createdDate:new Date()}, {title:'title 2',category:'two',users:20,createdDate:new Date()}, {title:'title 3',category:'two',users:20,createdDate:new Date()}, {title:'fourth title',category:'three',users:10,createdDate:new Date()} ]; this.tableResource=new DataTableResource(this.applist); this.tableResource.query({offset:0}) .then(items=> this.items=items) this.tableResource.count().then(count=>this.itemCount=count) }

reloadItems(params){ if(!this.tableResource) return;

this.tableResource.query(params)
.then(items=> this.items=items)

} ngOnInit() { }

}

export interface AppList{ title:string category:string users:number createdDate:object }

and html is

<data-table [items]="items" [itemCount]="itemCount" (reload)="reloadItems($event)"

<data-table-column [property]="'title'" [header]="'Title'", [sortable]="true", [resizable]="true"

other details are Angular CLI: 1.7.0 Node: 6.10.2 OS: win32 x64

brunano21 commented 6 years ago

Hi, Sorry for the late reply. Did you sort it out?

28pankaj commented 6 years ago

I have also the same issue, can anybody solved this???

brunano21 commented 6 years ago

@28pankaj Can you share your code, please?

AbQayyum commented 6 years ago

@brunano21 I haven't solved it yet. will spare some time to figure this out.

brunano21 commented 6 years ago

@AbQayyum Do you want to share some code?

AbQayyum commented 6 years ago

@brunano21 the issue was resolved when updated the node version to 7.9.0. you may close this.

28pankaj commented 6 years ago

@brunano21 mine node version is 8.9.3.., you mean to say I have to degrade the version then it will work.

brunano21 commented 6 years ago

@28pankaj which of version of angular are you using?

28pankaj commented 6 years ago

@brunano21 angular "^5.2.0",

brunano21 commented 6 years ago

@28pankaj when are you getting this error?At runtime? Please share some code or screenshot, otherwise, I cannot help you.

AbQayyum commented 6 years ago

@28pankaj When I was facing the issue I had different node version, my ng -v command shows another version of node and node -v command shows the other.

fathimaburhana commented 5 years ago

i am facing the same issue. my angular version is 6 and node version is 10.13.0 please help . Capture Capture1

@brunano21