ng2-Dragula [Dragula] (eckig2 Drag & Drop) - * ngFor mit [DragulaModel] Attribut funktioniert nicht

Question

Verwenden von ng2-Dragula Wrapper-Drag-and-Drop-Bibliothek für eckige 2 Dragula.

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

Sehen Probleme mit dem [dragulaModel]='myList' ..., wenn der Artikel gefallen wird ... puh ... es verschwindet.

Wenn ich das Element überprüfe, sehe ich, dass es im Modell bleibt, aber das DOM-Element verliert seine inner html (wird leeres div) - was dazu führt, dass das div "angezeigt" wird.

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, herausgefunden, das Problem. Der innere HTML-Code ist leer, weil das tatsächliche DOM-Element Dragula Moves das innere HTML (Elementinhalt) ist, anstatt das mit dem Attribut markierte Element zu verschieben.

Dieses regelte es:

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

Ihre eigene Dokumentation ist ein wenig unklar, mit diesem, wie sie haben:

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

Moral der Geschichte: Bewegen Sie [dragula] und [dragulaModel] UP ein Element aus dem Sie setzen Ihre *ngFor.