Question

我一直在努力安静地使用纸质数据表（paper data table by David Mulder）在我的角度2应用程序中。

数据表问题中描述了我面临的问题： Issue opened regarding using the table in angular 2 applicaiton

基本上使用聚合物未记录的dataHost属性，在angular2中使用它时会得到不正确的值。我尝试了几个解决方案的角度，我不能让它们完全起作用： 1）我试图找到一种方法来制作一个聚合物元素，为我包裹桌子，我试图从元素的外部（作为一个有效的孩子）给它表格防御，然后从那里删除它并重新将它添加到元素local dom。 dataHost的问题保持不变，我甚至发现David自己过去报告了这个问题（所以我想我的解决方案不能用于导致David代码失败的相同原因） Issue about adding elements to the localdom with the dataHost 2）在我建议使用的问题开始时发布的问题页面中。这没有用，因为一个新的原因，这个dom-bind内部的内容甚至没有放在dom中，我想我可以把它连接到angular2以他自己的方式读取模板标签的事实并评论它们如果它们中没有任何有意义的东西（例如[ngIf]属性）。

我真的很感激帮助解决方案1或2，或者不同的解决方案（我找不到一个可能在角度2中工作的功能齐全的材料设计表，所以如果有一个我不知道它的一个选项也是）

非常感谢您的帮助！：）

-------------------- UPDATE -------------------------- ---

到目前为止我尝试过的一些代码示例：

<!-- 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>

以下是我尝试实现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属性定义为公共属性，因此我可以将数据绑定到表数据（我将始终需要使用它在我的组件内部，并且总是需要从组件传递参数和数据，如果有替代方法可以使用绑定，它也可以与解决方案一起工作

Answer 1

<template>元素由Angular在内部处理，从不实际落在DOM中。

一些建议

确保为没有本机影子DOM支持的浏览器加载Polymer和完全polyfill的影子DOM。另请参阅https://www.polymer-project.org/1.0/docs/devguide/settings.html
您可以将提供<template>的元素和data-table元素包含在另一个Polymer元素中，这样Angular就不会处理<template>元素，因为它是Polymer的一部分元素而不是角度视图。
您可以尝试将模板元素强制添加到DOM以循环Angulars模板处理

另请参阅我最近报告的此问题https://github.com/angular/angular/issues/7974

Answer 2

我想我设法找到了一些解决方案。我改变了源代码的一小部分，这可能＆＃34;伤害＆＃34;一些功能（我认为只有与列数组相关的功能）但我在我的项目中使用它并且效果很好。我还写了一个小角度2分量包装器来缓解问题。

你可以在这里查看：

paper-datatable-fixes-for-angular-2

在angular2

2 个答案: