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

Question

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

Answer 1

サブスクリプションの引数によって提供されるelementのインデックスを検索することで、アイテムのモデルを取得できます。elementList

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

見る？

更新: 簡素化 (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.itemsdragula に渡すリストを格納する変数です。(例: [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
}

編集:簡略化にエラーがありました。

Answer 2

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);
    });

モデル内で項目が再配置されていることがわかります。