angular2のhtml要素でモデルを取得

Question

angular2のhtml要素でモデルにアクセスする必要があります。私の場合、ng2-dragulaを使用してドラッグアンドドロップを実行し、そのサービスはドラッグされるhtml要素にのみアクセスできます。そして、要素の対応するモデルを更新する必要があります。問題はgithubにあります。

Answer 1

ngForが配列からコンパイルされている場合は、bag要素に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

サブスクリプションの引数で指定されたelementListのelementのインデックスを検索すると、商品のモデルが表示されます。

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アレイにラップしてください。

let i = el.children.indexOf(e) 

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

にする必要があり、私も親リストからインデックスに子要素を取得するには、予期しない結果を生成し、時には新しい未定義のアイテムを生成したことがわかりました。

代替直接IDソリューション： "要素のモデル" とは、

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

、その後onDrop方法で

console.log(e.id);