Angular 'this' reference undefined within Set function each

GoJS
1

I’m able to handle diagram events of objects dropped, and extract the data from the node model from the palette that is copied over to the diagram via console.log. When I try to call a function from the each Set iterator, the called function (nodeHanlder) is not recognized. Using angular with IntellJ with chrome on osx. The error is telling me that the Angular object doesn’t exist.

Object Dropped
Node: Item2
In loop
core.es5.js:1020 ERROR TypeError: Cannot read property 'nodeHandler' of undefined

// diagram-editor-component.ts
export class DiagramEditorComponent implements OnInit {
...
   constructor () {
....
            this.diagram.addDiagramListener('ExternalObjectsDropped', e => this.objectDroppedHandler(e));

   }
        objectDroppedHandler(e: DiagramEvent): void {
        console.log('Object Dropped');
          e.subject.each( function(node) {
              console.log('In loop');
              console.log('Node: ' + node.data['text']);
              this.nodeHandler(node);
          }
        }


    nodeHandler(node: go.Node): void { }
}
2

Ah, the joys of having to deal with JavaScript. The expression this.objectDroppedHandler does not return a function with a binding of this to your object that has those method definitions.

I suggest that you use e => this.objectDroppedHandler(e) instead.

3

Hi Walter - it’s actually the function after that. It’s an angular namespace, this is within an angular class. The handler is being called correctly, it’s the reference within the handler to the angular controller that isn’t resolving. I didn’t see any examples of this in the angular examples.

That being said, I did try it in case there was some JS oddity I wasn’t aware of, but it didn’t work. I edited the original code paste to make it a little clearer.

4

Did you try what I suggested?

this.diagram.addDiagramListener('ExternalObjectsDropped', e => this.objectDroppedHandler(e));

This is just a problem with JavaScript and has nothing to do with either Angular or GoJS.

5

Hi Walter, I definitely tried what you suggested and updated my code above to reflect it, sorry about that. I also added extra print statements to show the outer and inner loop progress - the method is being called, the event is being passed correctly, and I am iterating over the Set. It would appear the instance of DiagramEditorComponent isn’t visible to the function used by Set in the go namespace, but I’m just speculating.

6

That’s different from what I remember, because now your code is passing this function:

          e.subject.each( function(node) {
              console.log('In loop');
              console.log('Node: ' + node.data['text']);
              this.nodeHandler(node);
          }

But that too is very wrong, because using this inside a function implies that function is being used as a method on an object. Yet you should have no intention of passing a method to the Set.each method.

I think you could fix that by using an arrow function there too.

Again, these problems are being caused by JavaScript, not Angular or GoJS.

7

Ah, gotcha. You’re saying the function passed into the iterator. Tried it and it WORKS! I’m transferring our entire system over to JS and gojs from legacy flash, so these distinctions are not obvious right now. Thanks very much - I’ll have to see if this is causing another issue I have with Adornments.