angular2'de html öğesiyle model al

Question

Modele html öğesiyle açısal2'de erişmem gerekiyor. Benim durumumda sürükle-bırak işlemini gerçekleştirmek için ng2-dragula kullanıyorum ve servisi sadece sürüklenen html öğelerine erişebiliyor. Ve elemanın ilgili modelini güncellemem gerekiyor. Sorun, github numaralı telefondan.

Answer 1

Eğer ngFor'unuz bir diziden derlenmişse, torba elemanındaki dragulaModel özniteliğini ayarlayarak model sağlamanız gerekir. Eğer ürün yeniden konumlandırmak zaman

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

Ve model senkronize edilir. Bileşeninizde, güncelleştirilmiş modeli kolayca yapabilirsiniz.

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

Öğelerin, modelinizde yeniden konumlandırıldığını göreceksiniz.

Answer 2

Öğenizin modelini, aboneliğin bağımsız değişkenleri tarafından sağlanan element dizini için elementList dizininde arayarak alabilirsiniz.

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

See?

GÜNCELLEME: Basitleştirme (Dracco sayesinde)

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 Eğer dragula geçmek listesini depolamak değişkendir. (ör. [dragulaModel]="items").

Keşke daha basit bir yol vardı. Bir tane bulursan söyle!

Eski yol:

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 
} 

DÜZENLEME: basitleştirme bir hata vardı.

Answer 3

el.children'i bir ES6 Dizisinde sardığınızdan emin olun.

let i = el.children.indexOf(e) 

Ben de ebeveyn listeden indeksi çocuk eleman alınırken öngörülemeyen sonuçlar üretmiştir ve bazen yeni tanımsız öğeler yarattığı ortaya çıktı

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

olmalı.

Alternatif Doğrudan Kimliği Çözüm:

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

ve ardından "öğesinin modeli" ile ondrop yöntemiyle

console.log(e.id);