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

问题描述：

我需要通过angular2中的html元素访问模型。在我的情况下，我使用ng2-dragula执行拖放操作，其服务只能访问被拖动的html元素。我需要更新元素的相应模型。继承人问题在github。在angular2中通过html元素获取模型

通过 “元素的模型” 你的意思是一些组件的属性？一些代码会有所帮助（Plunker首选）。 –

@MarkRajcok代码在github上，链接在问题的最后。我的意思是使这个元素出现的angular2模型。检查代码后，如果不清楚，请告诉我。 –

我不知道有什么办法可以“从HTML元素到组件” - 即给定一个HTML，我不知道如何获得该元素使用HTML元素的引用...组件其模板具有该HTML元素。 –

答

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

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

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

答

您可以通过搜索由订阅的参数提供的elementList中的element的索引来获取您的物品的型号。

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

请参阅？

UPDATE：简化（感谢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 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf – Dracco

我无法从中获取模型。仅对html元素的引用 –

对不起，简化形式有错误。我现在修好了。 – Umagon

答

确保将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元素获取模型

相关推荐