Polymer 1.x：iron-data-table 在 neon-animated-pages 内时不会在首次渲染时加载数据或 header 样式

Question

下面的屏幕截图显示了我的 iron-data-table 元素首次加载时的外观。请注意数据丢失并且 header 未完全格式化（宽度似乎太小无法显示列 header 标签）。

但是，如果我在筛选字段中输入一个字符或单击其中一个排序按钮，iron-data-table 似乎是 re-draw 本身并且看起来不错。列和 header 正确呈现并且数据按预期填充 table。

当我~~向我的文件结构~~ 将我的iron-data-table 嵌套在neon-animated-pages 中时，这个问题就开始了。我仔细检查了一下，我所有的导入都正确加载了。但我怀疑，不知何故，在获取数据时会有轻微的延迟，并且 table 可能会在数据到达之前尝试渲染，而在数据到达后不刷新。

所以我尝试添加以下功能。但无济于事。 iron-data-table没有render()方法。

<iron-data-table id="grid" ...

....

attached: function() {
  this.async(function() {
    this.$$('#grid').render();
  }.bind(this), 500);
},

是什么导致了这种行为？接下来我应该尝试什么？

编辑

This plunk demonstrates the desired iron-data-table behavior.

This plunk demonstrates my problem behavior。 （尚未完成。目前正在进行中。）

配置大致如下

parent-el.html

<neon-animated-pages>
  ...
  <container-el...>...</container-el>
</neon-animated-pages>

container-el.html

<child-el ...>...</child-el>

child-el.html

<iron-data-table ...></iron-data-table>

编辑 2

根据@SauliTähkäpää 的评论，我尝试了以下修复但未成功。

parent-el.html

<neon-animated-pages id="animator" ...>
  ...
  <container-el...>...</container-el>
</neon-animated-pages>

...

attached: function() {
  this.async(function() {
    this.$.animator.notifyResize();
  }.bind(this), 50);
},

Answer 1

不太熟悉 neon-animated-pages 但通过查看文档，它应该在选定的页面上调用 notifyResize() 只要它们扩展 iron-resizable-behavior.

所以我认为您的选择是确保 <container-element> 和树中的其他元素正在扩展 iron-resizable-behavior 或覆盖 resizerShouldNotify 以直接通知网格。在此处查看更多信息：https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages#method-resizerShouldNotify

Answer 2

为以后关注此问题的任何人解释...

根据@SauliTähkäpää 接受的答案，我成功地将以下代码添加到链中的每个元素（即，从包含 neon-animated-pages 的元素开始并以包含 iron-data-table 的元素 — 在此示例中，将是 parent-el、container-el 和 child-el).

parent-el.html, container-el.html, child-el.html.

<link rel="import" href="path/to/bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
...
behaviors: [
  Polymer.IronResizableBehavior,
],

Polymer 1.x：iron-data-table 在 neon-animated-pages 内时不会在首次渲染时加载数据或 header 样式

Polymer 1.x: iron-data-table does not load data nor header styles on first render when inside neon-animated-pages

plunker

polymer

polymer-1.0

iron-data-table

polymer-1.x

编辑

编辑 2