我需要通过angular2中的html元素访问模型。在我的情况下,我使用ng2-dragula执行拖放操作,其服务只能访问被拖动的html元素。我需要更新元素的相应模型。继承人问题在github。在angular2中通过html元素获取模型
6
A
回答
0
如果您的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);
});
您会注意到项目被重新定位在您的模型中。
+1
有没有办法明确地告诉哪个项目被移动? – Umagon
2
您可以通过搜索由订阅的参数提供的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
}
编辑:简化了错误。
0
确保将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);
相关问题
- 1. AngularJS - 通过html元素获取ng模型
- 2. Python HTML - 通过属性获取元素
- 3. Angular2从任何HTML元素获取模板参考
- 4. 通过ClientInstanceName获取元素
- 5. 通过Id获取元素
- 6. 如何在Erlang中通过ID /类获取HTML元素?
- 7. 骨干模型通过ID获取JSON元素
- 8. 在django模板中通过ID获取元素
- 9. 如何通过.get()获取父元素一次获取元素
- 10. 无法通过VB中的TagName获取HTML元素
- 11. 获取AJAX的HTML中的元素无法通过getElementbyID找到
- 12. 通过preg_match从HTML文件中获取2个元素
- 13. 如何通过JavaScript中的类获取HTML元素?
- 14. 通过angularjs中的另一个元素获取元素
- 15. 在angularJS中获取html元素
- 16. 如何在Xcode中获取HTML元素?
- 17. 在.NET中获取HTML元素信息
- 18. 如何通过遍历从html元素获取某些文本?
- 19. DomDocument/DOMXPath - 如何通过itemprop和img src获取HTML Dom元素
- 20. 如何通过ExtJs获取HTML元素值?
- 21. 如何通过搜索innerHTML的内容来获取HTML元素?
- 22. HTML解析URL与DomDocument和DOMXPath - 通过ID获取元素
- 23. 获取元素通过名称 - HTML DOM短语
- 24. 如何使用XPath通过文本获取HTML元素?
- 25. 通过名称与html数组获取元素
- 26. 如何通过JavaScript获取HTML元素值?
- 27. 如何通过Awesomium ExecuteJavascriptWithResult获取html文档元素的nodeName?
- 28. 如何通过hpple(xpath)获取html,xml的元素?
- 29. javascript通过内部ID获取元素
- 30. xml.dom.minidom通过标记名获取元素
通过 “元素的模型” 你的意思是一些组件的属性?一些代码会有所帮助(Plunker首选)。 –
@MarkRajcok代码在github上,链接在问题的最后。我的意思是使这个元素出现的angular2模型。检查代码后,如果不清楚,请告诉我。 –
我不知道有什么办法可以“从HTML元素到组件” - 即给定一个HTML,我不知道如何获得该元素使用HTML元素的引用...组件其模板具有该HTML元素。 –