Angular 2，ng2-dragula和dragulaModel

Question

我尝试在我的应用中使用ng2-dragula添加选项以重新排序添加到列表中的指令列表。例如，把它想象成你正在制作一个食谱并且你输入一个指令，但是然后想把它移到列表中的其他地方而不删除其他的等等。我会去寻找类似的东西。

这是HTML：

<div [dragula]="'recipeInstructionBag'" [dragulaModel]="recipe.instructions">
    <div class="input-group" *ngFor="let instruction of recipe?.instructions; let i = index; trackBy:trackInstructions">
        <span class="input-group-addon reorder-trigger"><i class="fa fa-reorder"></i></span>
        <input class="form-control" type="text" [ngModel]="instruction" (ngModelChange)="recipe.instructions[i] = $event" [name]="'recipeInstruction' + i">
    </div>
</div>

所以我已经在正确的位置获得了指令，我已经*ngFor正在工作并能够编辑指令等等。我想要发生的一切都在起作用，除了拖动时重新排序这些项目。 I've looked at the docs，特别是页面底部的Angular特定示例，以及我获取[dragulaModel]指令信息的地方。问题是当我尝试拖放元素时，它们不会正确重新排序。我试着解释一下：

列表中有两个项目，拖动重新排序并不会对它们重新排序。我放下第二个项目，以便它应该是第一个，它会被放回原来的位置。

现在观看这个GIF有3个项目：

如您所见，我尝试将第3项移至第二位。它一直落到列表的底部。然后我把它带到头号位置，它将列表重新排序为2,3,1。当列表中有4个或更多项时，会发生类似的事情。

此外，在尝试重新排序后添加新项目时，它会被放置在数组中的意外位置：

我不确定这笔交易是什么或如何解决。如果有人有这方面的经验并且可以提供帮助，我将非常感激！