Javascript 添加新项目后的ng2 dragula它'；它被显示在顶部_Javascript_Angular_Angular9_Dragula_Ng2 Dragula

Javascript 添加新项目后的ng2 dragula它'；它被显示在顶部

javascript angular

Javascript 添加新项目后的ng2 dragula它'；它被显示在顶部,javascript,angular,angular9,dragula,ng2-dragula,Javascript,Angular,Angular9,Dragula,Ng2 Dragula,我使用ng2 dragula的拖放功能。当我将第一个元素（或任何元素）拖放到末尾，然后尝试使用addNewItem按钮将新项添加到数组中时，我看到了问题，新项不会添加到末尾。若我并没有将元素放到末尾，那个么在UI的末尾会添加新的项。我希望在任何情况下，新项目都显示在底部。感谢您的帮助。对于Angular 7，此问题不可复制。我看到这发生在Angular 9上 JS export class SampleComponent { items = ['Candlestick','Dagger

我使用ng2 dragula的拖放功能。当我将第一个元素（或任何元素）拖放到末尾，然后尝试使用addNewItem按钮将新项添加到数组中时，我看到了问题，新项不会添加到末尾。若我并没有将元素放到末尾，那个么在UI的末尾会添加新的项。我希望在任何情况下，新项目都显示在底部。感谢您的帮助。对于Angular 7，此问题不可复制。我看到这发生在Angular 9上

export class SampleComponent {

  items = ['Candlestick','Dagger','Revolver','Rope','Pipe','Wrench'];
  constructor(private dragulaService: DragulaService) { 
    dragulaService.createGroup("bag-items", {
      removeOnSpill: false
    });
  }

  public addNewItem() {
    this.items.push('New Item');
  }
}

HTML

<div class="container" [dragula]='"bag-items"' [(dragulaModel)]='items'>
    <div *ngFor="let item of items">{{ item }}</div> 
</div>


{{item}}

添加新项目

我根据评论编辑了stackblitz，以帮助将问题形象化。这似乎是在将单元拖到列表底部时触发的。更新的闪电战：

您可以尝试在放置时恢复旧物品的位置

constructor(private dragulaService: DragulaService) {
  this.subscription = this.dragulaService.drop().subscribe(({ name }) => {
    this.dragulaService.find(name).drake.cancel(true);
  });
}

解释 Ivy和ViewEngine在特定索引处插入ViewRef的方式有所不同。它们在不同的节点上进行中继

如果在末尾添加项，Ivy始终返回ViewContainer主机（注释节点）：

export function getBeforeNodeForView(viewIndexInContainer: number, lContainer: LContainer): RNode|
    null {
  const nextViewIndex = CONTAINER_HEADER_OFFSET + viewIndexInContainer + 1;
  if (nextViewIndex < lContainer.length) {
    const lView = lContainer[nextViewIndex] as LView;
    const firstTNodeOfView = lView[TVIEW].firstChild;
    if (firstTNodeOfView !== null) {
      return getFirstNativeNode(lView, firstTNodeOfView);
    }
  }

  return lContainer[NATIVE]; <============================= this one
}

解决方案可能是将拖动的元素恢复到原始容器，这样我们就可以让内置的

ngForOf

Angular指令执行其智能扩散

顺便说一句，同样的技术也用于角材料

DragDropModule

。它会记住拖动元素的位置，在我们拖放项目后，它会将其插入DOM中的旧位置，这一点很重要。

您可以尝试在拖放时恢复旧项目的位置

constructor(private dragulaService: DragulaService) {
  this.subscription = this.dragulaService.drop().subscribe(({ name }) => {
    this.dragulaService.find(name).drake.cancel(true);
  });
}