Ngx-datatable: trackBy must be a function, but received null

Created on 22 Dec 2016 · 10Comments · Source: swimlane/ngx-datatable

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

Current behavior
I'm using the exact example code from the docs...
https://swimlane.gitbooks.io/ngx-datatable/content/introduction/getting-started.html

But when I run it, I'm getting this error:
Error: trackBy must be a function, but received null
at NgFor.set [as ngForTrackBy] (ng_for.js:151) [angular]

Expected behavior
Should display the simple table

Reproduction of the problem
Typescript: 2.0.10
angular-cli: 1.0.0-beta.24
node: 6.9.1
os: win32 x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/material: 2.0.0-alpha.11-3
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

Investigate

Source

nickraphael

👍2

Most helpful comment

@amcdnl yes - previously you could do

trackBy: item?.Id

trackBy: trackByFn

it's documented that way all over the place... e.g. http://stackoverflow.com/questions/36322829/how-to-use-track-by-inside-ngfor-angular-2

I know that specific example is before 2.0.0 BUT I was using trackBy this way until at least 2.2.3 (I just upgraded to 2.4.1 and it now only accepts a function and will throw with the syntax in the first example).

josh-sachs on 3 Jan 2017

👍2

All 10 comments

This one happend when switched from angular 2.4.0 to 2.4.1 and might be related to this issue https://github.com/angular/angular/pull/13420

Currently I just rolled back to angular 2.4.0 and all working just fine.

Angular-cli has hats (^) prefixes in front of each package version (e.g: "^2.3.1") so this morning using npm install I was getting angular 2.4.0 and after the lunch time I was getting version 2.4.1 that was being just released to npm which is breaking the ngx-datatable as above.

So part of my package.json is looking like that for now:

...
 "dependencies": {
    "angular/common": "2.4.0",
    "@angular/compiler": "2.4.0",
    "@angular/core": "2.4.0",
    "@angular/forms": "2.4.0",
    "@angular/http": "2.4.0",
    "@angular/platform-browser": "2.4.0",
    "@angular/platform-browser-dynamic": "2.4.0",
    "@angular/router": "3.4.0",
    "zone.js": "0.7.2"
    "rxjs": "5.0.1"
        ...
}
"devDependencies": {
    "@angular/compiler-cli": "2.4.0",
        ...
}
...

kuncevic on 22 Dec 2016

👍1

I'm experiencing same exact issue. I'm unable to use the table in any format (basic, inline, etc.). I'm using angular 2.3.1

cortopy on 23 Dec 2016

@cortopy hmm i am using 2.3.1 and it works fine. Now i upgraded because of a checkbox bug was fixed in the newer versions and started to experience this :dancer:

aegyed91 on 23 Dec 2016

https://github.com/swimlane/ngx-datatable/blob/master/src/components/body/body-row.component.ts#L18 incorrect usage of trackBy, for example.
it's not an angular issue :)

DzmitryShylovich on 23 Dec 2016

👎2 👍2

@DzmitryShylovich - I'm doing incorrect usage? Can you provide correct approach?

amcdnl on 25 Dec 2016

Just question - why this one is not closed? Mentioned commit solved the issue.

JanCejka on 28 Dec 2016

👍2

I assume it is documented somewhere, but this appears to be a breaking change in 2.4.1 - hence people's confusion. The comment doesn't clearly explain that.

josh-sachs on 2 Jan 2017

The change for tracking is a breaking change? I did not realize that.

amcdnl on 3 Jan 2017

@amcdnl yes - previously you could do

trackBy: item?.Id

trackBy: trackByFn

it's documented that way all over the place... e.g. http://stackoverflow.com/questions/36322829/how-to-use-track-by-inside-ngfor-angular-2

josh-sachs on 3 Jan 2017

👍2

I agree this is a breaking change, the problem appeared in 2.3 for me.