Get-Modell von HTML-Element in angular2

Question

Ich muss auf das Modell durch das HTML-Element in angular2 zugreifen. In meinem Fall benutze ich ng2-Dragula, um Drag & Drop durchzuführen und der Dienst hat nur Zugriff auf die gezogenen HTML-Elemente. Und ich muss das entsprechende Modell des Elements aktualisieren. Heres das Problem bei github.

Answer 1

Wenn Ihr ngFor aus einem Array kompiliert wurde, müssen Sie ein Modell bereitstellen, indem Sie das Attribut tugulaModel für das Element bag festlegen.

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

Und wenn Sie neu zu positionieren die Elemente, wird das Modell synchronisiert werden. In Ihrer Komponente können Sie das aktualisierte Modell auf einfache Weise erhalten.

this.dragulaService.drop.subscribe((value) => { 
     //let [bagName, e, el] = value; 
     console.log(this.items); 
    }); 

Sie werden feststellen, dass die Artikel in Ihrem Modell neu positioniert werden.

Answer 2

Sie können das Modell Ihres Artikels erhalten, indem Sie nach dem Index element in elementList suchen, der von den Argumenten des Abonnements bereitgestellt wird.

dragulaService.drop.subscribe(e => this.onDrop(e.slice(1))); 

Sehen Sie?

UPDATE: Vereinfachung (Dank Dracco)

private onDrop(args) { 

    let [e, el] = args; //element, elementList 
    let i = el.children.indexOf(e), 
    item = i+1? this.items[i] : null; 

    console.log(item); //The item 
} 

this.items ist die Variable, in dem Sie die Liste speichern Sie dragula passieren. (z.B. [dragulaModel]="items").

Ich wünschte, es gäbe einen einfacheren Weg. Sag mir, wenn du eins findest!

Alte Art und Weise:

private onDrop(args) { 

    let [e, el] = args; //element, elementList 
    let item; 
    for(let i in el.children){ 
     if(el.children[i]==e){ 
      item = this.items[+i]; 
      break;     
     } 
    } 

    console.log(item); //The item 
} 

EDIT: die Vereinfachung hatte einen Fehler.

Answer 3

Stellen Sie sicher, dass Sie el.children in ein ES6-Array einpacken.

let i = el.children.indexOf(e) 

Sollten seine

let i = Array.from(el.children).indexOf(e) 

Ich fand auch, dass mit dem Index von der übergeordneten Liste erzeugte unvorhersehbare Ergebnisse und manchmal erzeugte neue undefinierte Elemente das untergeordnete Element abruft.

Alternative Direkt ID Lösung:

<ion-item *ngFor="let child of children" [id]="child"></ion-item> 

und dann in der onDrop Methode

console.log(e.id);