получить модель по элементу html в angular2

Question

Мне нужно получить доступ к модели элементом html в угловом2. В моем случае я использую ng2-dragula для выполнения перетаскивания, и его служба имеет только доступ к элементам html, которые перетаскиваются. И мне нужно обновить соответствующую модель элемента. Heres вопрос на github.

Answer 1

Если ваш ngFor скомпилирован из массива, вам необходимо предоставить модель, установив атрибут dragulaModel на элемент мешка.

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

И всякий раз, когда вы повторно положение детали, модель будет синхронизироваться. В вашем компоненте вы можете легко получить обновленную модель, выполнив это.

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

Вы заметите, что элементы переустановлены в вашей модели.

Answer 2

Вы можете получить модель своего товара, выполнив поиск индекса element в elementList, предоставленном аргументами подписки.

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

См.?

UPDATE: Упрощение (Спасибо 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 является переменной, где вы храните список, который вы передаете Dragula. (например, [dragulaModel]="items").

Желаю, чтобы был более простой способ. Скажи мне, если найдешь!

Старый путь:

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: упрощение была ошибка.

Answer 3

Обязательно заверните el.children в ES6 Array.

let i = el.children.indexOf(e) 

Должен быть

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

Я также обнаружил, что извлечение дочернего элемента с индексом из родительского списка производится непредсказуемые результаты, а иногда и породили новые неопределенные элементы.

Alternative Direct ID Solution:

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

, а затем в методе OnDrop

console.log(e.id);