2

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

在此处输入图像描述

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

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

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

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

....

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

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

编辑

这个 plunk 演示了所需的iron-data-table行为。

这个 plunk 演示了我的问题行为。（尚未完成。目前正在进行中。）

配置大致如下。

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

2 回答 2

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

于 2016-10-13T17:19:14.023 回答
0

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

根据@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,
],
于 2016-10-13T18:39:08.107 回答