在嵌套ul li（树结构）Angular 6中拖放

Question

我是新手，必须使用带有拖放功能的嵌套Ul Li创建树结构。我已经创建了树，但是问题是没有拖放API可以满足需求。我尝试过：

angular-sortablejs：它适用于第一级和第二级，但不能更新第三级的模型。

ng2-dnd：最初，官方网站上的演示无法正常运行。实施成项目后，在chrome和IE上无法正常运行。

ng2-dragula：它适用于简单的结构，但是[[dragulaModel）]引发错误“错误：无法分配给引用或变量！在ng-template中使用时。

我在下面附上我的代码。请通过指导适当的方法来帮助我。

public itemLst: any = [
    {
      "ID": "w0qGZyyNFS4iM0Kg91Q9Qw==",
      "ParentID": "tFI6lCmoxWHoyV2BG8JVrA==",
      "Title": "First Level-1",
      "Level": 0,
      "SeqUnderParent": 1,
      "IsExpanded": true,
      "Children": [
        {
          "ID": "zq9LTplusN0Dm0JTHVdQslshHdeQ==",
          "ParentID": "7lrJGzICJ9RQfzOmyrS7iA==",
          "Title": "A-A-A",
          "Level": 2,
          "SeqUnderParent": 1,
          "IsExpanded": true,
          "Children": null
        },
        {
          "ID": "nC2amdwTnvfFST6H9sPFvA==",
          "ParentID": "7lrJGzICJ9RQfzOmyrS7iA==",
          "Title": "A-A-B",
          "Level": 2,
          "SeqUnderParent": 2,
          "IsExpanded": true,
          "Children": [
            {
              "ID": "C8hd7iKvVG9Fe58zAJEvXw==",
              "ParentID": "0I3JVAepKOr3m8I3A4nIOw==",
              "Title": "AASSS",
              "Level": 1,
              "SeqUnderParent": 1,
              "IsExpanded": true,
              "Children": null
            },
            {
              "ID": "C8hd7iKvVG9Fe58zAJEvXw==",
              "ParentID": "0I3JVAepKOr3m8I3A4nIOw==",
              "Title": "AASSS1",
              "Level": 1,
              "SeqUnderParent": 1,
              "IsExpanded": true,
              "Children": null
            }
          ]
        },
        {
          "ID": "7GOeSrjoKVzaaUdslshcshd3Q==",
          "ParentID": "w0qGZyyNFS4iM0Kg91Q9Qw==",
          "Title": "Second Level-A-2",
          "Level": 1,
          "SeqUnderParent": 2,
          "IsExpanded": true,
          "Children": null
        },
        {
          "ID": "0po5Gq9fgP6M4HAUqpOeQA==",
          "ParentID": "w0qGZyyNFS4iM0Kg91Q9Qw==",
          "Title": "ASS",
          "Level": 1,
          "SeqUnderParent": 3,
          "IsExpanded": true,
          "Children": null
        },
        {
          "ID": "f3mnQRplusyWJ29mZ4iuWXMAg==",
          "ParentID": "w0qGZyyNFS4iM0Kg91Q9Qw==",
          "Title": "ASS",
          "Level": 1,
          "SeqUnderParent": 4,
          "IsExpanded": true,
          "Children": null
        },
        {
          "ID": "oiWFtn65slshplusDTNXIgvhuh3A==",
          "ParentID": "w0qGZyyNFS4iM0Kg91Q9Qw==",
          "Title": "AAA",
          "Level": 1,
          "SeqUnderParent": 5,
          "IsExpanded": true,
          "Children": null
        },
        {
          "ID": "213TjdSJ6rbSAfy1pluskWhcQ==",
          "ParentID": "w0qGZyyNFS4iM0Kg91Q9Qw==",
          "Title": "AAA",
          "Level": 1,
          "SeqUnderParent": 6,
          "IsExpanded": true,
          "Children": null
        }
      ]
    },
    {
      "ID": "ESG8y8zbTJ9xyk2y7HplusfWQ==",
      "ParentID": "tFI6lCmoxWHoyV2BG8JVrA==",
      "Title": "First Level-2",
      "Level": 0,
      "SeqUnderParent": 2,
      "IsExpanded": true,
      "Children": null
    },
    {
      "ID": "hEcK8yI3J2aThtIIW6wGsA==",
      "ParentID": "tFI6lCmoxWHoyV2BG8JVrA==",
      "Title": "First Level-3",
      "Level": 0,
      "SeqUnderParent": 3,
      "IsExpanded": true,
      "Children": null
    },
    {
      "ID": "CmpxM8wA9lK8mZYDMO6oLw==",
      "ParentID": "tFI6lCmoxWHoyV2BG8JVrA==",
      "Title": "ASS",
      "Level": 0,
      "SeqUnderParent": 4,
      "IsExpanded": true,
      "Children": null
    },
    {
      "ID": "LJgfmEN5d7KGnEnKhWvK6Q==",
      "ParentID": "tFI6lCmoxWHoyV2BG8JVrA==",
      "Title": "ASS",
      "Level": 0,
      "SeqUnderParent": 5,
      "IsExpanded": true,
      "Children": [
        {
          "ID": "fYPZM2qCejk4EMgxHOUdKQ==",
          "ParentID": "LJgfmEN5d7KGnEnKhWvK6Q==",
          "Title": "ASS",
          "Level": 1,
          "SeqUnderParent": 1,
          "IsExpanded": true,
          "Children": null
        },
        {
          "ID": "qtZmXYQFs7mcDTR4Oh8ouw==",
          "ParentID": "LJgfmEN5d7KGnEnKhWvK6Q==",
          "Title": "ASS",
          "Level": 1,
          "SeqUnderParent": 2,
          "IsExpanded": true,
          "Children": null
        },
        {
          "ID": "bG9ZSM4hae5ss0hNDCxsslshQ==",
          "ParentID": "LJgfmEN5d7KGnEnKhWvK6Q==",
          "Title": "ASS",
          "Level": 1,
          "SeqUnderParent": 3,
          "IsExpanded": true,
          "Children": null
        }
      ]
    },
    {
      "ID": "0I3JVAepKOr3m8I3A4nIOw==",
      "ParentID": "tFI6lCmoxWHoyV2BG8JVrA==",
      "Title": "SSS",
      "Level": 0,
      "SeqUnderParent": 6,
      "IsExpanded": true,
      "Children": [
        {
          "ID": "C8hd7iKvVG9Fe58zAJEvXw==",
          "ParentID": "0I3JVAepKOr3m8I3A4nIOw==",
          "Title": "AASSS",
          "Level": 1,
          "SeqUnderParent": 1,
          "IsExpanded": true,
          "Children": null
        }
      ]
    }
  ]

<div>
  <ng-template #recursiveList let-itemList>
    <ul *ngIf="itemList!=null && itemList.length>0" dragula="tree" [(dragulaModel)]="itemList">
      <li *ngFor="let item of itemList">
        <a href="javascript:void(0);" *ngIf="item.IsExpanded && item.Children!=null && item.Children.length > 0">
          <img src="/SB_Assets/images/arrow_down.png" />
        </a>
        <a href="javascript:void(0);" *ngIf="!item.IsExpanded && item.Children!=null && item.Children.length > 0">
          <img src="/SB_Assets/images/arrow_right_tree.png" />
        </a>
        <a href="javascript:void(0);" (click)="ItemClick();">{{item.Title}}</a>

        <div *ngIf="item.IsExpanded">
          <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.Children }"></ng-container>
        </div>
      </li>
    </ul>
  </ng-template>
  <div>
    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: itemLst }"></ng-container>
  </div>
</div>