通过angular2中的html元素获取模型

Question

我需要通过angular2中的html元素访问模型。在我的例子中，我使用ng2dragula来执行拖放，它的服务只能访问被拖动的html元素。我需要更新元素的相应模型。这是github的问题。

Answer 1

您可以通过在订阅参数提供的elementList中搜索element的索引来获得项目的模型。

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.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
}

编辑：简化出现错误

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

您会注意到这些项目已重新定位在您的模型中。

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