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

Cannot read property 'length' of undefined #28

Closed gpthome closed 6 years ago

gpthome commented 6 years ago

We are using this module for the first time. Works great, except for one small problem. The table is basically rendering, but ends with a JavaScript error which then prevents other scripts from running.

We are using "angular5-data-table": "1.0.0",

We just ran npm install, then ng serve

Also noticed the example here https://www.npmjs.com/package/angular5-data-table shows itemCount but the documentation refers to itemsCount

Any thoughts?

From browser Console

IndexComponent.html:2 ERROR TypeError: Cannot read property 'length' of undefined at Object.eval [as updateDirectives] (IndexComponent.html:5) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14638) at checkAndUpdateView (core.js:13785) at callViewAction (core.js:14136) at execComponentViewsAction (core.js:14068) at checkAndUpdateView (core.js:13791) at callViewAction (core.js:14136) at execEmbeddedViewsAction (core.js:14094) at checkAndUpdateView (core.js:13786) at callViewAction (core.js:14136)

index.component.html

<div>
  <data-table id="my-table"
              [title]="'Status'"
              [items]="incidents"
              [itemCount]="incidents.length"     <=== this is line 5
  >
    <data-table-column sortable="true"
      [property]="'created'"
      [header]="'Created'"
    >
      <ng-template #dataTableCell let-item="item">
        {{ item.created  | date :'short'}}
      </ng-template>
    </data-table-column>
    ...

Example "incidents" data

[{"incidentId":"f08651f9-c577-46b9-a9db-f89d72492bdf","title":"Title 1","resolve":false,"created":1526354027327,"updates":[{"created":1526354027327,"status":"SCHEDULED","comment":"Comment 1.","postedBy":"dude@gmail.com"}],"postedBy":"dude@gmail.com","application":"WIDGET","environment":"PROD"},{"incidentId":"060ade77-ad4d-41c6-bf83-8b92f8250b5d","title":"Title 2","resolve":false,"created":1526433270053,"updates":[{"created":1526433270053,"status":"SCHEDULED","comment":"Comment 2","postedBy":"dude@gmail.com"}],"postedBy":"dude@gmail.com","application":"WIDGET","environment":"PROD"}]

brunano21 commented 6 years ago

@gpthome There is a typo in the documentation, the right property is itemCount - I'll fix that. Can you show where you set incidents? Also, if incidents is initially undefined the itemCount=incidents.length will cause an exception. In this case, you could use the safe navigation operator ?, i.e. itemCount=incidents?.length.

brunano21 commented 6 years ago

@gpthome do you have any news on this issue?

brunano21 commented 6 years ago

@gpthome Closing this for inactivity. Feel free to reopen it if you still have this issue.