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

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

确保将 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);

Answer 3

如果您的 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);
    });

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