Question

我正在尝试在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”导入到文件中。

我所看到的是，铁列表创建了3个模板（正确地说是这样），但它不会打印出字符串（标题）。这应该很简单，但我迷失在这里。任何人都知道它为什么不打印出来？

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

Answer 1

来自here，它说

铁列表在通过商品收到通知时列出项目   调整大小事件。任何实现的元素都会触发此事件   IronResizableBehavior。

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

因此您需要手动调用

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

显示列表后

。

此外，即使您没有隐藏/显示列表，您的代码仍然无法正常工作，因为您过早地将值分配给list。 / p>

原因是在iron-list内部，执行呈现_render的功能只会在this._isVisible为true时执行此任务。 this._isVisible基于offsetWidth本身的大小调整（offsetHeight＆amp; iron-list）。

相反，尝试在attached处理程序中分配值，在需要时稍微延迟 -

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

Answer 2

我很确定你没有为你的铁列表元素声明一个明确的大小。

来自docs：

重要：iron-list必须显式大小，或委托滚动到显式大小的父级。通过“显式大小”，我们的意思是它要么通过类或内联样式设置显式CSS高度属性，要么通过其他布局方式（例如flex或fit类）进行大小调整。

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

2 个答案: