问题标签 [iron-data-table]

此演示中的以下代码适用于我的应用程序：

https://saulis.github.io/iron-data-table/demo/index.html

但是当我将数据源从iron-ajax调用更改为内部数据绑定{{items}}时，它不起作用。

项目列表.html

我希望表格中填充数据。相反，表和列标题呈现，但数据不填充表。

几点：我正在使用 Firebase 来存储数据。以及polymerfire/firebase-query要获取数据的元素（在所示元素的父数据绑定元素中）{{items}}。

我应该朝哪个方向尝试解决这个问题？

编辑

以下描述了我为items变量设置的方式和内容：

我的 Firebase 内部的数据结构如下。

https://console.firebase.google.com/project/my-app/database/data

我通过父元素中的Polymerfire 元素将该数据提取到我的应用程序中。firebase-query

概述-page.html

我知道{{items}}数据正在进入list-items元素，因为我设置了一个按钮来将数据记录到控制台。

项目列表.html

当我按下Show按钮时，控制台会记录以下内容：

控制台日志

有趣的是，当我为工作代码示例记录相同的信息时：

我得到：

控制台日志

去搞清楚。显然，有些事情我不明白。看起来{{items}}数据绑定在iron-data-table渲染之后注册，并且由于某种原因，数据绑定iron-data-table在它在iron-list元素中注册之后没有更新。

编辑2

这是元素的完整dom-module定义。items-list

当我在这个 JSbin 中运行我的代码时，我希望它能够以类似于它在这个演示页面上iron-data-table的方式呈现填充数据。相反，只有表格标题呈现，但其余单元格无法填充。

可以对 JSbin 进行哪些更改以实现所需的行为？

http://jsbin.com/hepebapori/1/edit?html，控制台，输出

我想用它iron-data-table来显示和编辑其中一行的详细信息。我希望行详细信息成为 main 的独立子元素iron-data-table。类似于此 jsBin 演示所显示的内容。

从本地服务器上的本地存储库运行时，以下模式会产生预期的行为。

项目列表.html

但是，以下模式会产生意外行为。

项目列表.html 行-detail.html

出乎意料的行为是在纸张输入中单击以使其聚焦的行为会关闭该row-detail部分。从而防止编辑。

当且仅当我将paper-input元素iron-data-table直接移出并移入它自己的子元素（我目前称之为row-detail元素）时，才会发生这种变化。

谁能建议可能导致此问题的原因以及如何解决？我也很乐意回答任何澄清问题，希望能得到这个问题的答案。

在iron-data-table中，当我单击任何当前选定的行时，我希望selected-item( {{selectedItem}}) 对象反映当前（和以前）选定的行；但相反，它变成了null.

重现问题的步骤：

1. 打开这个 jsBin。
2. 选择任意行。
3. 注意所选对象打印到页面顶部和控制台。
4. 选择不同的行。
5. 注意新选择的项目打印到页面顶部和控制台。
6. 清除控制台。（可选。将帮助您查看下一步的结果。）
7. 单击当前选定的行。
8. Notice selected-item( {{selectedItem}}) 对象现在是null.

如何更正此问题，以便所选对象是新选择的行（即先前选择的行）而不是 null？

http://jsbin.com/xucemijada/1/edit?html,控制台,输出

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

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

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

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

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

编辑

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

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

配置大致如下。

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

编辑 2

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

父-el.html

在这个 Plunk 中，为什么元素不会x-foo渲染 HELLO WORLD？.

鉴于更复杂的content-el似乎iron-data-table完全正确地导入了一个。我忽略了一些简单的事情吗？请用工作的笨拙回答。

http://plnkr.co/edit/p7IE7v6DHLVnEggeO8PF?p=preview

这是笨拙的。

谁能指出我格式化（或预处理）进入转发器（例如iron-list或iron-data-table）的数据项的模式？

换句话说，考虑一下这个笨拙的例子。假设我想为每个用户添加一个字段并将其显示在列表中；让我们称之为namelength：

我将如何（在 HTML 或 JS 中的什么位置以及使用什么模式）最好地处理这个预处理任务？

内容-el.html

如何添加filter属性<iron-data-table？（请发布一个 plunk 演示。）

我叉了这个笨蛋。然后我尝试通过添加以下行来添加过滤器：

这打破了笨拙。这是新的（现已损坏的） plunk。

此处的文档描述了该filter属性，如下所示：

filter包含用于过滤项目的路径/过滤器值对的数组。

但它缺乏一个如何使用它的例子。

如何添加filter属性<iron-data-table？（请发布一个 plunk 演示。）

这是Plunk。

我想按照这个 SO question 的接受答案中的描述dataSource实现过滤功能。我的问题是这里的文档没有给出如何做到这一点的例子。<iron-data-table

最终，我将希望在大型数据集上拥有一组复杂的过滤器（想想：控制面板）。

我尝试复制dom-repeat 此处文档中描述的方法，但没有成功。

http://plnkr.co/edit/cGykY65HWnK4pIQ0qx8O?p=preview

如何正确实现dataSource属性函数来过滤 的项目<iron-data-table？

我正在使用从 iron-ajax 加载 JSON 数据的 iron-data-table。我让用户选择多行并单击“删除”。该列表被发送到后端并从数据库中删除。

但是在前端，表格没有更新。我试过 table.clearCache 但它没有帮助。

关于如何进行的任何想法？