Angular 2 Dragula模型更新错误

Question

使用ng2-dragula.我正在寻找使用新删除的订单更新数据库中每个项目的orderNumber.

dragulaService.dropModel.subscribe((value) => {
  var drake = dragulaService.find('bag-orders').drake
  var models = drake.models
  console.log(models)
})

它返回的新模型订单不反映包中的订单.

TL; DR:有没有人用ng2-dragula在数据库onDrop中实现重新排序？

Answer 1

如果你想能够拖动项目(没有它们消失)并激活dropModel事件:

• 将[dragula]和[dragulaModel]指令放在父元素中.(例如,与当前的文档相反,它将它们放入其中<li>,你必须把它们放入<ul>

• 注入dragularService,并在组件的构造函数中:

• 调用bag的dragulaService.setOptions(你可以传递一个空字典).如果你不调用它,dropModel则不会触发回调

• 订阅dropModel

结果:

<!--thecomponent.html-->
<h2>Playlists</h2>
<ul [dragula]='"first-bag"' [dragulaModel]='playlists'>
  <li *ngFor="let playlist of playlists">

//Inside the component.ts  
playlists: Playlist[];

constructor(private youtubeService: YoutubeService, private dragulaService: DragulaService) {

    dragulaService.setOptions('first-bag', {})
    dragulaService.dropModel.subscribe((value) => {
      this.onDropModel(value);
    });
}

private onDropModel(args) {
    //Here, this.playlists contains the elements reordered
}

Answer 2

我正在使用ng2-dragula而且我注意到的事情很奇怪.我遇到的问题是一样的.服务器调用未根据拖动的顺序更新数据对象.

我刚刚在ngDoCheck生命周期钩子中使用了if子句来解决问题.

它在控制台中的打印对象中排序.在深入挖掘之后,可以在网络中发现使用更新服务器调用发送的对象是未更新的对象.

因此,这是因为服务器调用是在数据对象更新之前进行的.

我所做的只是添加一个全局变量,可以跟踪已更新数据对象的拖动.

private dropModelUpdated = false;

ngAfterViewInit() {
    // this method only changes a variable to execute a method in ngDoCheck
    this.dragulaService.drop.subscribe((value) => {
      this.dropModelUpdated = true;
    });
}

然后,在ngDoCheck生命周期钩子中,

ngDoCheck() {    
    if (this.dropModelUpdated) { // this excutes if this.dropModelUpdated is true only
        const drake = this.dragulaService.find('any_bag_name').drake;
        const models = drake.models;
        this.modelContent.groups = models[0];
        // ...Here... Make the server or DB call to update the model with the changed/sorted order
        this.dropModelUpdated = false; // make sure this is there for the next smooth execution
    }
}

Answer 3

我终于找到了解决方案。我有一个水平清单。前两个元素是我要忽略的元素，并且都具有ignoreCSS类。并且所有元素都有item类。所以标记：

<ul [dragula]='"foo-list"' class="list">
    <li class="list ignore">a</li>
    <li class="list ignore">b</li>
    <li class="list" *ngFor="let item of getList()" [attr.data-id]="item.id">{{ item.name }}</li>
</ul>

然后输入TypeScript：

constructor(private dragulaService: DragulaService) {
    let dragIndex: number, dropIndex: number;

    dragulaService.setOptions('foo-list', {
        moves: (el, source, handle, sibling) => !el.classList.contains('ignore'),
        accepts: (el, target, source, sibling) => sibling === null || !sibling.classList.contains('ignore'),
        direction: 'horizontal'
    });

    dragulaService.drag.subscribe((value) => {
        // HACK
        let id = Number(value[1].dataset.id);
        if (!!id) {
            dragIndex = _.findIndex(this.getList(), {id: id});
        }
    });

    dragulaService.drop.subscribe((value:any[]) => {
        // HACK
        let elementNode = value[2].querySelectorAll('.item:not(.ignore)').item(dragIndex);
        if (elementNode) {
            let id = Number(elementNode.dataset.id);
            if (!!id) {
                dropIndex = _.findIndex(this.getList(), {id: id});
            }
        }

        if (value[2] === value[3]) { // target === source
            if (dragIndex >= 0 && dropIndex >= 0 && dragIndex !== dropIndex) {
                let temp: any = this.list[dragIndex];

                this.list[dragIndex] = this.list[dropIndex];
                this.list[dropIndex] = temp;
            }
        }

        // Custom code here
    });
}

getList(): any[] {
    return this.list;
}