在angular2中使用纸张数据表 [英] using paper datatable in angular2
问题描述
我一直在为使用纸质数据表而安静一段时间 ( David Mulder的纸张数据表)在我的angular 2应用程序中.
I have been struggling for quiet a while about using paper-data-table (paper data table by David Mulder) in my angular 2 application.
数据表问题描述了我面临的问题: 有关在角度2应用程序中使用表格的问题已打开
The problem im facing is described in the data table issue: Issue opened regarding using the table in angular 2 applicaiton
基本上，使用了聚合物未记录的dataHost属性，该属性在angular2中使用时会得到不正确的值.我尝试了几种角度的解决方案，但我无法使它们中的任何一个完全起作用: 1)我试图找到一种制作聚合物元件的方法，该元件可以为我包裹桌子，我尝试从该元件的外部(作为有效的孩子)为它指定桌子的防御力，然后将其从那里移走，然后重新将其添加到元素本地dom. dataHost的问题仍然相同，我什至发现David自己过去也曾报告过此问题(因此我猜我的解决方案由于使David代码失败的原因而无法正常工作) 有关使用dataHost向本地添加元素的问题 2)在我在问题开始时发布的问题页面上，David建议使用.由于新的原因，此操作不起作用，该dom-bind的内部内容甚至都没有放在dom中，我想我可以将其连接到angular2以其自己的方式"读取模板标签并对其进行注释的事实如果其中没有任何有意义的内容(例如[ngIf]属性).
Basically there is a use of the polymer undocumented dataHost property that gets incorrect value when using it in angular2. I have tried a few angles of solutions which I cant make any of them work completely: 1) I tried to find a way to make an polymer element that will wrap the table for me, I tried to give it the table defenition from the outside of the element (as an effective child) and then remove it from there and re-add it to the element local dom. The problem with the dataHost remainded the same, I even found that David himself reported this issue in the past (so I guess my solution can't work for the same reason that makes David code fail) Issue about adding elements to the localdom with the dataHost 2) In the issue page which I posted in the start of the questetion David suggested to use . This didnt work because of a new reason, the content of the inside this dom-bind was not even placed in the dom, I think I can connect this to the fact that angular2 reads the template tags in his "own way" and comments them if there isn't anything meanningful in them (such as an [ngIf] attribute for example).
对于解决方案1或2或其他解决方案，我将不胜感激(我找不到一个功能齐全的材料设计表，该表可以在angular 2中使用，因此，如果有一个我不知道其解决方案的材料设计表，也可以选择)
I would really appreciate help with either solutions 1 or 2, or a different solution (I couldn't find a fullly featured material design table that might work in angular 2, so if there is one that im not aware of its an option too)
在此先感谢您的帮助！ :)
Thanks alot in advance for any help ! :)
--------------------更新-------------------------- ---
-------------------- UPDATE -----------------------------
到目前为止我尝试过的一些代码示例:
Some code examples to what I have tried so far:
<!-- Normal way of using the table, throws "Uncaught TypeError: Cannot set property '_pdt_getArrayItemLabel' of undefined" -->
<paper-datatable [data]="data" selectable multi-selection>
<paper-datatable-column header="Name" property="exmp" sortable editable>
<!--<template is="dom-bind">-->
<!--<paper-input value="{{data.exmp}}" no-label-float></paper-input>-->
<!--</template>-->
</paper-datatable-column>
</paper-datatable>
<!-- This code still throws "Uncaught TypeError: Cannot set property '_pdt_getArrayItemLabel' of undefined". I think
Becuase of the polymer issue I linked to about dataHost bug I linked to in polymer git hub (the one David opened)-->
<table-wrapper id="tableWrapper" is="dom-bind" [data]="data">
<paper-datatable [data]="data" selectable multi-selection>
<paper-datatable-column header="Name" property="exmp" sortable editable>
</paper-datatable-column>
</paper-datatable>
</table-wrapper>
<!-- The solution suggested by David in the data-table bug with angular 2 issue link. Could be really awosome if
I could get this to work, but for some reason, the template tag gets commented in the html and this code
is just removed from the dom, I think its related to the way angular 2 compiler deals with this template
tag-->
<template is="dom-bind">
<paper-datatable [data]="data" selectable multi-selection>
<paper-datatable-column header="Name" property="exmp" sortable editable>
</paper-datatable-column>
</paper-datatable>
</template>
这是我尝试实现表包装器的方式:
and here is how I tried to implement the table-wrapper:
<dom-module id="table-wrapper">
<template>
<!-- Using content tag will cause the exact same problem as not using the wrapper,
since it will become an effective child and not a real one-->
<!--<content></content>-->
</template>
<script>
Polymer({
is: 'table-wrapper',
attached: function() {
debugger;
var element = Polymer.dom(this);
var child = element.removeChild(this.children[0]);
var root = Polymer.dom(this.root);
root.appendChild(child);
// Though this should work, the dataHost property isnt correct, like stated in the issue that
// David opened in the polymer project
}
});
</script>
</dom-module>
使用表的代码在某个组件中也很重要，在该组件中，我将data属性定义为公共属性，因此我可以将其数据绑定到表数据(我将始终需要使用它放在我的组件内部，并且如果需要使用绑定也可以与解决方案一起使用，那么总是需要从组件传递参数和数据.
Also important to say that the code that uses the table is in some component, where in the component I define the data property as a public one, so I can data bind it to the table data (I will always need to use it inside my components, and always will need to pass it parameters and data from the component, if there is an alternative to using the binding that can also work with the solution its good aswell
推荐答案
<template>元素由Angular在内部进行处理，并且从未真正降落在DOM中.
<template> elements are processed by Angular internally and never actually land in the DOM.
一些建议
-
确保已为Polymer启用了影子DOM，并为不支持本机Shadow DOM的浏览器加载了完整的polyfills.另请参见 https://www.polymer-project.org/1.0/docs /devguide/settings.html
您可以将提供<template>和数据表元素的元素包装在另一个Polymer元素内，以便Angular不会处理<template>元素，因为它是Polymer元素的一部分，而不是角度视图.
you could wrap the element that provides the <template> and the data-table element inside another Polymer element, so that Angular doesn't process the <template> element because it's part of a Polymer element instead of a Angular view.
您可以尝试向DOM强制添加模板元素以进行Angulars模板处理
you could try to add the template element imperatively to the DOM to circument Angulars template processing
另请参阅我最近报告的这个问题 https://github.com/angular/angular/issues /7974
See also this issue I reported recently https://github.com/angular/angular/issues/7974
这篇关于在angular2中使用纸张数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
