angular 2 アプリケーションでpaper-data-table ( David Mulder による paper data table )を使用することについて、私はしばらく静かに苦労してきました。
私が直面している問題は、データ テーブルの問題で説明されています: angular 2 アプリケーションでのテーブルの使用に関して開かれた問題
基本的に、ドキュメント化されていないポリマーの dataHost プロパティが使用されており、angular2 で使用すると誤った値が取得されます。私はいくつかの解決策を試しましたが、それらのいずれも完全に機能させることはできません: 1) テーブルをラップするポリマー要素を作成する方法を見つけようとしました。要素の (有効な子として) 削除し、そこから削除して、要素のローカル dom に再度追加します。dataHostの問題は同じままでした。David 自身が過去にこの問題を報告したことさえわかりました (したがって、David のコードが失敗するのと同じ理由で、私の解決策は機能しないと思います) データホスト 2) 私が質問の最初に投稿した問題ページで、David は . これは新しい理由で機能しませんでした。この dom-bind の内容は dom にさえ配置されていませんでした。これは、angular2 がテンプレート タグを「独自の方法」で読み取ってコメントするという事実に関連付けることができると思います。それらに意味のあるものが何もない場合 (たとえば [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>
また、テーブルを使用するコードが一部のコンポーネントに含まれていることも重要です。コンポーネントでは、データ プロパティをパブリック プロパティとして定義しているため、テーブル データにデータ バインドできます (常に内部で使用する必要があります)。コンポーネントであり、常にコンポーネントからパラメーターとデータを渡す必要があります。これは、ソリューションでも機能するバインディングを使用する代わりの方法がある場合に限ります。