在angular2中使用纸质数据表

Question

我一直在为使用纸质数据表而苦苦挣扎 (paper data table by David Mulder) 在我的 Angular 2 应用程序中。

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

基本上，在 angular2 中使用聚合物未记录的 dataHost 属性时会得到不正确的值。我尝试了几个角度的解决方案，但我无法使它们中的任何一个完全起作用： 1）我试图找到一种方法来制作一个聚合物元件来为我包裹桌子，我试图从元件外部（作为一个有效的孩子）给它提供桌面防御，然后从那里移除它并重新 -将其添加到元素本地 dom。 dataHost 的问题仍然存在，我什至发现 David 自己过去曾报告过这个问题（所以我猜我的解决方案无法正常工作，原因与导致 David 代码失败的原因相同） Issue about adding elements to the localdom with the dataHost 2）在我在大卫建议使用的问题开头发布的问题页面中。由于一个新的原因，这不起作用，这个dom-bind内部的内容甚至没有放在dom中，我想我可以将这与angular2以他的“自己的方式”读取模板标签并对其进行cmets的事实联系起来如果它们没有任何意义（例如 [ngIf] 属性）。

我非常感谢解决方案 1 或 2 或其他解决方案的帮助（我找不到可以在 angular 2 中工作的功能齐全的材料设计表，所以如果有一个我不知道它的选项）

非常感谢您的任何帮助！ :)

-------- 更新 -------------- ---

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

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

这是我尝试实现表格包装器的方式：

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

同样重要的是，使用表的代码在某个组件中，在该组件中，我将数据属性定义为公共属性，因此我可以将其数据绑定到表数据（我总是需要使用它在我的组件中，并且总是需要从组件传递参数和数据，如果有替代方法可以使用也可以与解决方案一起使用的绑定，那么它也很好

Answer 1

我想我设法找到了一些解决方案。我修改了源代码的一小部分，这可能 “伤害”了一些功能（我认为只有与列数组相关的功能），但我在我的项目中使用它并且效果很好。我还编写了一个小的 Angular 2 组件包装器来简化操作。

您可以在这里查看：

paper-datatable-fixes-for-angular-2

Answer 2

<template> 元素由 Angular 内部处理，并且从未真正落入 DOM。

一些建议

• 确保为 Polymer 启用了 shadow DOM，并为没有原生 shadow DOM 支持的浏览器加载了完整的 polyfill。另见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