DataTableFooterComponent: "Cannot read property 'toLocaleString' of undefined"

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

When initializing a data table with the below code, the below error is printed to the console.

<ngx-datatable class="material"
    [rows]="configs"
    [columns]="columns"
    [limit]="10"
    [headerHeight]="50"
    [footerHeight]="50">
</ngx-datatable>

The following error (and its corresponding DebugContext) is logged to the console four times when I load my page:

DataTableFooterComponent.html:20 ERROR TypeError: Cannot read property 'toLocaleString' of undefined
    at Object.eval [as updateRenderer] (DataTableFooterComponent.html:20)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13144)
    at checkAndUpdateView (core.es5.js:12293)
    at callViewAction (core.es5.js:12651)
    at execEmbeddedViewsAction (core.es5.js:12609)
    at checkAndUpdateView (core.es5.js:12289)
    at callViewAction (core.es5.js:12651)
    at execComponentViewsAction (core.es5.js:12583)
    at checkAndUpdateView (core.es5.js:12294)
    at callViewAction (core.es5.js:12651)

This is the value of the component property in the DebugContext printed to the console:

This is confusing to me, because all of the component’s values seem to be defined. Also confusing because DataTableFooterComponent.html:20 points to a line without any bindings on it, but that could just be a sourcemap problem:

Despite the errors, the footer seems to render correctly:

Expected behavior

The table displays without logging any errors to the console.

Reproduction of the problem

The problem happens on page load. Could not reproduce in Plunker. Seems to be related to this commit.

What is the motivation / use case for changing the behavior?

This is a bug.

Please tell us about your environment:

macOS 10.12.5 VS Code 1.13.1 node 8.0.0, npm 5.0.0 Angular CLI 1.1.3

• Table version: 9.3.0

• Angular version: 4.2.4

• Browser: [all | Chrome 58.0.3029.110 (64-bit) | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[dannyvenier]

Seems from the error that selectedCount is null at some point - could it be that selectedCount is not initialized when the view part of the footer is rendered (on first load) and that is the source of the error. Then when selectedCount gets set, the binding kicks in and all is good. However, looking at what you posted, I would expect the footer to say something like “0 selected / 29 total”. It is hard to tell without much of the code. Also possible that the error message is pointing at rowCount rather than selectedCount, or more likely both since you saw duplicates of the error. Either way, when the error is thrown, the property is null, likely prior to its initialization. Take a look at the lifecycle of selectedCount and rowCount to see when they get initialized.

[ikilled]

I also faced this issue and figured out that the problem was that I was providing to DataTable an Object containing multiple Objects (rows) but I should provide an Array containing multiple Objects.

More specifically, in my case the cause of problem was that the API providing the rows was filtering some results out of all DB results. This filtering caused that the array of rows didn’t have sequential keys any more (but something like 2,3,5,8,…) so PHP automatically added “explicit” keys to my array. I solved it by removing these keys with php’s function array_values() before API sending the response to my front-end Angular App.