ng2-dragula [dragula] (угловая2 перетаскивание) - * ngFor с атрибутом [dragulaModel] не работает

Question

Использование библиотеки обтекания перетаскиванием ng2-dragula для углового 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' } 
    ]; 
} 
} 

Answer 1

Welp, выяснил проблему. Внутренний html пуст, потому что фактический DOM элемент dragula move - это внутренний 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.