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

【问题标题】：get model by html element in angular2通过angular2中的html元素获取模型
【发布时间】：2016-04-15 12:38:01
【问题描述】：

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

【问题讨论】：

“元素模型”是指某些组件的属性吗？一些代码会有所帮助（首选 Plunker）。
@MarkRajcok 代码在github，链接在问题的最后。我的意思是使这个元素出现的 angular2 模型。检查代码后是否不清楚，请告诉我。
我不知道有什么方法可以“从 HTML 元素到组件”——即，给定一个 HTML，我不知道如何获取对该 HTML 元素所在的组件的引用被使用...其模板具有该 HTML 元素的组件。
似乎应该有一种使用 ng.probe(htmlElement) 的肮脏方式，但它仅用于调试目的。所以现在它就像“可以完成”，没有检查 ng.probe 是如何工作的。

【解决方案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
}

编辑：简化有错误。

【讨论】：

相同方式的更简单形式：使用 indexOf developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
我无法从中获取模型。仅引用 html 元素
对不起，简化的表格有错误。我现在修好了。

【解决方案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);
    });

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

【讨论】：

有没有办法明确地告诉哪个项目正在被移动？

【解决方案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);

【讨论】：