嵌套数组中的无法插入元素动态

Question

我正在处理具有大型嵌套数组的角树。

节点：

public fonts: TreeModel = {
    value: 'Fonts',
    children: [
      {
        value: 'Serif  -  All my children and I are STATIC ¯\\_(ツ)_/¯',
        settings: {
          'static': true
        },
        children: [
          { value: 'Antiqua' },
          { value: 'DejaVu Serif' },
          { value: 'Garamond' },
          { value: 'Georgia' },
          { value: 'Times New Roman' },
          {
            value: 'Slab serif',
            children: [
              { value: 'Candida' },
              { value: 'Swift' },
              { value: 'Guardian Egyptian' }
            ]
          }
        ]
      },
      {
        value: 'Sans-serif',
        children: [
          { value: 'Arial' },
          { value: 'Century Gothic' },
          { value: 'DejaVu Sans' },
          { value: 'Futura' },
          { value: 'Geneva' },
          { value: 'Liberation Sans' }
        ]
      }
    ]};

树看起来类似于图像中的一个：

每次用户点击Any节点时，API请求都会带来该节点的Child（JSON Array）。然后我需要将此响应数组附加到原始树数组中。 我面临的问题是如何针对单击的父节点用户将节点子节点动态插入到原始数组中。

当前问题的任何更好的解决方案对我也有帮助。 目前我正在使用angular2-tree-component来实现树。

Answer 1

最后我得到了解决方案。

我切换到ng2-tree来实现树。 它具有树节点的所有内置方法，并且有很好的文档记录 npm: ng2-tree

为每个节点提供一个id。当用户单击任何节点时，调用一个方法将子项添加到其中。

public addChildFFS(id: number | string, newNode: TreeModel) {

    newNode.id = ++this.lastFFSNodeId;
    const treeController = this.treeFFS.getControllerByNodeId(id);
    if (treeController) {
        treeController.addChild(newNode);
    } else {}
}