angular2でデータテーブルを使用する

Question

私の角2のアプリケーションでは、ペーパーデータテーブル （paper data table by David Mulder）を使用することについて静かに苦労しています。

問題イムフェーシングは、データテーブルの問題で説明します。 Issue opened regarding using the table in angular 2 applicaiton

は基本的にangular2でそれを使用するときに、誤った値を取得しますdataHostプロパティを文書化されていないポリマーを使用することがあります。私はそれらのどれも完全に働かせることができない解決策のいくつかの角度を試みました： 1）私はテーブルを包むポリマー要素を作る方法を見つけようとしました、私はそれにテーブルのdefenitionを与えようとしました。 （有効な子として）要素の外側で削除し、そこから削除し、それを要素のローカルDOMに再度追加します。 dataHostの問題はそのまま残っていましたが、デイビッド自身が過去にこの問題を報告していることも分かりました。（私の解決策はDavidのコードが失敗するのと同じ理由で機能しません） Issue about adding elements to the localdom with the dataHost 2）問題ページデビッドは、デビッドが使用を提案した冒険の始まりに投稿しました。これは新しい理由から、このDOMバインド内のコンテンツがDOMに配置されていないため、これはangle2が独自の方法でテンプレートタグを読み取ってコメントするという事実と関連付けることができます（例えば、[ngIf]属性のような）それらの中に何らかの形容詞がない場合。

解決策1または2、または別の解決方法で本当に助けていただきたいと思います（角度2で機能するかもしれない完全に機能する材料設計表が見つかりませんでした。オプションもあります）

ありがとうございました！ :)

--------------------更新-----------------------また

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

重要：

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

、ここでは、私は、テーブル・ラッパーを実装しようとした方法である：私はこれまで試してみました何に------

いくつかのコード例つまり、テーブルを使用するコードは一部のコンポーネントにあります。コンポーネントでは、パブリックプロパティとしてデータプロパティを定義するので、daそれをテーブルデータにバインドします（私は常にコンポーネント内で使用する必要があります。また、バインディングを使用する代わりに、コンポーネントとパラメータとデータを渡す必要があります。 good aswell

Answer 1

<template>要素は内部的にAngularによって処理され、決して実際にはDOMに着地しません。

ヒント

• あなたはポリマーおよびネイティブシャドウDOMをサポートしていないブラウザのためにロードされた完全なpolyfillsのために有効にシャドウDOMを持っていることを確認します。参照してくださいhttps://www.polymer-project.org/1.0/docs/devguide/settings.html

それは角度ビューの代わりにポリマー要素の一部だから角度が <template>要素を処理しないように、あなたは、 <template>と他のポリマー要素内のデータ・テーブルの要素を提供する要素をラップすることができ

• 。

• あなたは

Angularsテンプレート処理をcircumentするDOMに命令的テンプレート要素を追加しようとする可能性も参照してください、この問題私は最近https://github.com/angular/angular/issues/7974

Answer 2

を報告した私は、私はいくつかの解決策を得ることができたと思います。私はソースコードの小さな部分を変更しましたが、これは の機能を傷つけるかもしれませんが（私は列配列に関連したものだと思っています）、私はプロジェクトでそれを使用しています。私は物事を楽にするために小さな角度の2成分ラッパーも書いた。

あなたはここでそれをチェックアウトすることができます：たくさんあなたの迅速な応答を

paper-datatable-fixes-for-angular-2