GoJS中Group侧边创建Port时arr变量未定义问题求助

我帮你定位到了问题的核心：当你从Palette拖出新的Group并尝试添加Port时，你的Group数据对象里没有预先初始化leftArray和rightArray这些用于存储Port数据的数组字段，所以执行到var arr = node.data[side + "Array"];这一行时，arr自然是undefined，导致后续无法插入新的Port数据。

具体修复方案 #

你可以通过以下两步彻底解决这个问题：

1. 给Palette中的Group数据初始化数组字段 #

修改Palette的Model数据，为Group添加leftArray和rightArray（如果需要上下侧Port，也可以同步添加topArray、bottomArray）：

myPalette.model = new go.GraphLinksModel([
  { 
    key: 101, 
    text: 'UNIT', 
    isGroup: true, 
    isSubProcess: true, 
    category: "OfGroups", 
    isAdHoc: true, 
    loc: '0 0',
    leftArray: [],  // 初始化左侧Port存储数组
    rightArray: []  // 初始化右侧Port存储数组
  },
]);

2. 在addPort函数中添加兜底处理（可选但更健壮） #

为了避免其他场景下Group数据未初始化数组的情况，在addPort函数中增加判断：如果数组不存在，就创建空数组并同步到Model中：

function addPort(side) {
  myDiagram.startTransaction("addPort");
  myDiagram.selection.each(function(node) {
    if (!(node instanceof go.Node)) return;

    var i = 0;
    while (node.findPort(side + i.toString()) !== node) i++;
    var name = side + i.toString();

    var arr = node.data[side + "Array"];
    // 兜底：如果数组不存在，创建空数组并更新Model数据
    if (!arr) {
      arr = [];
      myDiagram.model.setDataProperty(node.data, side + "Array", arr);
    }

    var newportdata = {
      portId: name,
      portColor: go.Brush.randomColor()
    };
    myDiagram.model.insertArrayItem(arr, -1, newportdata);
  });
  myDiagram.commitTransaction("addPort");
}

额外验证 #

确认你的Group模板中，左右侧Port的Panel已经正确绑定了itemArray（你的代码里这部分是正确的，这里再核对下）：

// 左侧Port容器Panel
$(go.Panel, "Vertical",
  new go.Binding("itemArray", "leftArray"),  // 绑定对应的数据数组
  { /* 其他配置 */ }
),
// 右侧Port容器Panel
$(go.Panel, "Vertical",
  new go.Binding("itemArray", "rightArray"),  // 绑定对应的数据数组
  { /* 其他配置 */ }
)

完成以上修改后，右键Group选择添加左侧/右侧Port时，就能正常创建并显示Port了。

内容的提问来源于stack exchange，提问作者user1438509