ERROR TypeError: useEditor is not a constructor on loading data from api

I’m submitting a Bug report

Your Environment

Software	Version(s)
Angular	^6.0.3
Angular-Slickgrid	^1.9.6
TypeScript	~2.7.2
Operating System
NPM/Node/Yarn

Context

When enabling edition in the grid’s options and setting editors for each column definitions, I get the following error when I try to edit a cell:

core.js:1598 ERROR TypeError: useEditor is not a constructor
    at makeActiveCellEditable (slick.grid.js:4410)
    at setActiveCellInternal (slick.grid.js:4297)
    at gotoCell (slick.grid.js:5064)
    at HTMLDivElement.handleDblClick (slick.grid.js:4040)
    at HTMLDivElement.dispatch (jquery-3.2.1.slim.min.js:3)
    at HTMLDivElement.push../node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js.$event.dispatch (jquery.event.drag-2.3.0.js:382)
    at HTMLDivElement.q.handle (jquery-3.2.1.slim.min.js:3)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4053)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
defaultErrorLogger @ core.js:1598
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1647
next @ core.js:4727
schedulerFn @ core.js:3712
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3704
(anonymous) @ core.js:4084
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:4021
onHandleError @ core.js:4084
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:191
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566

Possible Solution

i tried this.columnDefinitions = this.columnDefinitions.slice(); …but not working

Code Sample

this.columnDefinitions.push(retVal.header); //retVal.header is the columndefinition array from api
this.columnDefinitions = this.columnDefinitions.slice();
          this.formattedData = retVal.data;
          
          this.gridObj.invalidate();
          this.gridObj.render();

[ghiscoding]

I made a change in the library and pushed a new version 2.7.2 but it seems to still be a problem. Not sure why though since it was working locally in the lib, I will have to recheck it.

[ghiscoding]

Like I said earlier, show/hide is not the same as add/remove columns. Show/hide is a lot easier to do and you don’t need slice() for that.

If you still want to do adding/removing dynamically, I now understand your problem, it might have to do with the code that I’ve put in place within Angular-Slickgrid to deal with Editors. The Editor might not work because I use a different property name in Angular-Slickgrid, I use the internalColumnEditor, you can see some details on this line of Angular-Slickgrid internal code. For more info read below. When you create new column dynamically, you will have to do that job manually of copy the editor into the correct property. Again see the line to understand what to do.

Internally I take the editor and copy it to internalColumnEditor and then copy editor.model to editor. Why do I do that? Because SlickGrid has it’s own Editor factory which doesn’t work well with dome DI (like ngx-translate) that I need for the Editors and also there’s no Filter factory. I wanted both the Editor & Filter to be of the same structure (in your code) to make it easier to access when creating a grid.

I am not responsible for the Editor dynamic creation, you’ll have to read what I wrote and do the same on your side.