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

【问题标题】：Polymer 1.x: iron-data-table does not load data nor header styles on first render when inside neon-animated-pagesPolymer 1.x：在 neon-animated-pages 内时，iron-data-table 不会在首次渲染时加载数据或标题样式
【发布时间】：2016-10-14 04:05:34
【问题描述】：

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

但是，如果我在过滤器字段中输入一个字符或单击其中一个排序按钮，iron-data-table 似乎会重新绘制自己并且看起来很好。列和标题正确呈现，数据按预期填充表格。

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

所以我尝试添加以下功能。但无济于事。 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。 （尚未完成。目前正在进行中。）

配置大致如下。

父-el.html

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

容器-el.html

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

子-el.html

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

编辑 2

根据@SauliTähkäpää 的评论，我尝试了以下修复失败。

父-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);
},

【问题讨论】：

PolymerElements 目录中没有铁数据表。它似乎是其他人添加的，所以它可能是错误的
嗨！你能发布更多关于你如何配置你的桌子的信息吗？
@SauliTähkäpää：我正在尝试重新创建问题（见上面的编辑）。但是，我确实注意到这个问题似乎只在我尝试将它放在 neon-animated-pages 元素中时出现。请注意，neon-animated-pages 元素和 iron-data-table 之间有几个中间页面包装器元素。我目前的猜测是它可能与neon-animated-pages 的assignParentResizable(parentResizable) 或notifyResize() 方法有关。
好的，neon-animated-pages 可能是这里的原因，如果它执行一些调整大小动画或类似的，因为<iron-list> 试图测量视口、行等高度与附加时间有关。如果是这种情况，在表格元素上调用 notifyResize 应该可以解决问题。
啊，该函数是从 iron-resizable-behavior 继承的，并且在文档中似乎不直接可见。只需拨打this.$$('#grid').notifyResize()

标签： polymer polymer-1.0 plunker iron-data-table polymer-1.x

【解决方案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

【讨论】：

成功了！我选择了第一个选项...在整个元素链中扩展 IronResizableBehavior。再次感谢！你太棒了！

【解决方案2】：

为以后关注这个问题的人解释一下......

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

父-el.html、容器-el.html、子-el.html。

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

【讨论】：