We provide free support for 30 days to software developers who are considering purchasing a license

if you first Register to evaluate our developer products. We provide continuing support only to customers
with active subscriptions. Support can be via this forum, or via email, or via our web site. Note that we are
on the east coast of North America, so it may be a while before we can respond to your post.

Angular ‘this’ reference undefined within Set function each

dev Jan '18

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 undefin

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

}
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);
}
}

Skip to main content

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

Solved by walter in post #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 wr…

walter Jan '18

Northwoods Software

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.

dev Jan '18

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.

walter Jan '18

Northwoods Software

Did you try what I suggested?

this.diagram.addDiagramListener('ExternalObjectsDropped', e => this.objectDropp

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

dev Jan '18

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.

Skipwalter
to main content Jan '18
Northwoods Software
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.

dev Jan '18

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.