ng2-dragula [dragula](angular2拖放) – * ngFor与[dragulaModel]属性不起作用

使用ng2-dragula拖放包装库为角2 dragula.

https://github.com/valor-software/ng2-dragula

看到[dragulaModel] =’myList’的问题…当项目被丢弃时……噗……它消失了.

检查元素,我看到它仍然在模型中,但DOM元素丢失其内部html(变为空div) – 导致div“显示”被隐藏.

import { Component } from '@angular/core';
import { DragulaService } from 'ng2-dragula/ng2-dragula';

@Component({

moduleId: module.id,selector: 'my-app',template: `
 <div>
    <div class='wrapper'>
      <div class='container' *ngFor='let fixture of fixtures' [dragula]='"first-bag"' [dragulaModel]='fixtures'>
        <div>{{fixture.name}}</div>
      </div>
    </div>
  </div>
`,viewProviders: [DragulaService],styles: [`
.wrapper {
  display: table;
}
.container {
  display: block;
  background-color: rgba(255,255,0.2);
  width: 200px;
}
.container div,.gu-mirror {
  margin: 10px;
  padding: 10px;
  background-color: rgba(0,0.2);
  transition: opacity 0.4s ease-in-out;
}
.container div {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.gu-mirror {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
`]

})
export class DragulaComponent { 
fixtures: any[];

constructor( private dragulaService: DragulaService ) { 
    dragulaService.dropModel.subscribe((value:any[]) => {
        console.log(value);
        console.log(this.fixtures[0]);
    });
}

ngOnInit(): void {
    this.fixtures = [
         { id: 11,name: 'Table 1',day: 1,duration: '4h',closetBuild: true,clearance: false,consolidateExpand: '',associateMoves: 'dan',notes:'blah blah blah.',items: [ {name: "christmas sweaters",skus: [{sku:'123',comingFrom:'test coming from',earlySet: false}] }] },{ id: 12,name: 'Table 2',consolidateExpand:'',duration: '1.5H'},{ id: 13,name: 'Table 3 / C5',consolidateExpand:'e',day: 99,duration: '99.99h',},{ id: 14,name: 'Table 4',day: 1 },{ id: 15,name: 'Closet 70-71',duration: '19h',closetBuild: false,items: [ {name: "christmas sweaters and other very cool stuff",skus: [{sku:'123-456-789-111',comingFrom:'blah blah blah coming from',earlySet: 'fixtures'},{sku:'123-aaaa-383838383838-1',comingFrom:'test coming from'}] }] },{ id: 16,name: 'Closet 77-78' },{ id: 17,name: 'Closet 80-81' },{ id: 18,name: 'Closet 82-83' },{ id: 19,name: 'BACKSTOCK' },{ id: 20,name: 'TABLE C1' }
     ];
}
}

解决方法

韦尔普想出了这个问题.内部html是空白的,因为实际的DOM元素dragula移动是内部html(元素的内容),而不是移动标有属性[dragula]的元素.

这解决了它：

<div class='wrapper' [dragula]='"first-bag"' [dragulaModel]='fixtures'>
      <div class='container' *ngFor='let fixture of fixtures'>
        <div>{{fixture.id}}</div>
      </div>
    </div>

他们自己的文档有点不清楚,因为他们有：

<ul>
  <li *ngFor="let item of items" [dragula]='"bag-one"' [dragulaModel]='items'></li>
</ul>

故事的道德：移动你的[dragula]和[dragulaModel] UP你放置你的* ngFor的元素.