After model change data is added twice (Angular)

GoJS
1

Hi!
I’m using Angular and gojs-angular. In my application I need to fully replace diagram model, but after this operation new nodes (dropped from palette, copied and pasted, added programatically) are added twice.

Here is a demo which replicates the issue: GitHub - Hazzed5/gojs-model-change-issue

In the ngAfterViewInit() function changeModel() is called:

 changeModel() {
   this.graphNodeData = [];
   this.graphLinkData = [];
   const model = new go.GraphLinksModel(
     this.graphNodeData,
     this.graphLinkData
   );
   model.linkToPortIdProperty = "toPort";
   model.linkFromPortIdProperty = "fromPort";
   model.linkKeyProperty = "key";
   model.nodeKeyProperty = "key";
   model.nodeCategoryProperty = "category";
   this.graphComponent.diagram.model = model;

   this.exampleMessagesArray.forEach((message) => {
     this.graphNodeData.push(message);
   });
 }

Screenshot from 2020-06-23 15-31-56
Screenshot from 2020-06-23 15-31-561492×615 89.1 KB

Even though this.exampleMessagesArray contains 4 elements, this.graphNodeData and model.nodeDataArray have 8 elements with duplicated keys.

How can I fix this problem?

2

Your code is modifying the Model.nodeDataArray in a manner that the model will not know about the changes.

You could instead push those messages onto the graphNodeData Array before you assign it to the GraphLinksModel.nodeDataArray.

Maybe you could even just use the exampleMessagesArray as the nodeDataArray. Whether you can or not isn’t clear to me – it depends on how you want to use it.

3

Using exampleMessagesArray as the nodeDataArray worked, thank you!