聚合物铁列表迭代，但不打印

Posted 2023-02-23

【中文标题】聚合物铁列表迭代，但不打印

【英文标题】：Polymer iron-list iterates, but not printing

【发布时间】：2015-12-11 02:39:55

【问题描述】：

我正在尝试使用 Polymer 中的铁列表将对象数组显示为列表。在聚合物函数内部，我有...

ready: function() 
    this.list = [title: 'Thing 1', title: 'Thing 2', title: 'Thing 3'];

在模板中，我有...

<iron-list items="[[ list ]]" as="l">
    <template>
        <div class="row">
            <div class="" on-tap="">
                <span>[[ l.title ]]</span>
                <paper-checkbox class="right"></paper-checkbox>
            </div>
        </div>
    </template>
</iron-list>

我将“iron-list.html”导入到文件中。

我看到的是， Iron-list 创建了 3 个模板（确实如此），但它没有打印出字符串（标题）。这应该很简单，但我在这里迷路了。有人知道为什么它不打印出来吗？

编辑：我遗漏了一件重要的事情，这个元素以 display: none 开头，然后切换到稍后显示。

【问题讨论】：

您的代码看起来不错，请仔细检查您如何导入 iron-list.html。

是的，它就在那里。开发工具确认iron-list.html 已成功请求。

在开发工具中，您应该能够检查每个模板中的文本，对吧？它说什么？

所有 div 和 span 都在那里，但 span 内没有文本。

这 (plnkr.co/edit/0T2aHaLwmumTVyX9FKot?p=preview) 是你所有的代码，它工作正常......

【参考方案1】：

来自here，它说

iron-list 在通过 调整事件大小。此事件由任何实现的元素触发 IronResizableBehavior。

默认情况下，铁页、纸张标签或纸张对话框等元素 将自动触发此事件。如果您手动隐藏列表 （例如，您使用 display: none）您可能想要实现 IronResizableBehavior 或在列表之后手动触发此事件 再次变得可见。例如

所以你需要手动调用

document.querySelector('iron-list').fire('resize');

列表显示后。

---

此外，即使您没有隐藏/显示列表，您的代码仍然无法工作，因为您将值分配给 list 有点太早了。

原因是在iron-list内部，渲染_render的函数只有在this._isVisible是true时才会起作用。而this._isVisible 是基于iron-list 本身的大小（offsetWidth 和offsetHeight）。

因此，请尝试在 attached 处理程序中分配值，在需要时稍作延迟 -

attached: function () 
    this.async(function () 
        this.list = [ title: 'Thing 1' ,  title: 'Thing 2' ,  title: 'Thing 3' ];
    , 100);

【讨论】：

IINM，该事件现在是“iron-resize”。

【参考方案2】：

我很确定您没有为您的 iron-list 元素声明明确的大小。

来自docs：

重要提示：iron-list 必须明确调整大小，或者将滚动委托给明确调整大小的父级。 “显式调整大小”是指它要么具有通过类或内联样式设置的显式 CSS 高度属性，要么通过其他布局方式（例如 flex 或 fit 类）调整大小。

【讨论】：

我定义了height: 500px，元素检查器确认它已应用于<iron-list>。