angular - ng2-dragula [dragula](Angular2拖放)-*带有[dragulaModel]属性的ngFor无法正常工作

使用ng2-dragula拖放包装器库处理 Angular 2 dragula。

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

物品掉落时看到[dragulaModel]='myList' ...问题... ......它消失了。

检查该元素后，我发现它仍保留在模型中，但是DOM元素丢失了其inner 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, 255, 0.2);
  width: 200px;
}
.container div,
.gu-mirror {
  margin: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 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', day: 1, duration: '19h', closetBuild: false, clearance: false, consolidateExpand:'e', 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]从放置*ngFor的位置向上移动一个元素。

关于angular - ng2-dragula [dragula](Angular2拖放)-*带有[dragulaModel]属性的ngFor无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41044832/