Question

我需要通过angular2中的html元素访问模型。在我的例子中，我使用ng2-dragula执行拖放操作，它的服务只能访问被拖动的html元素。我需要更新元素的相应模型。继承问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.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);

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

3 个答案: