聚合物铁单迭代，但不打印

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开始display: none ，然后切换为稍后显示。

Answer 1

从这里说

Iron-List通过resize事件接收通知时，将对项目进行布局。 任何实现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);
}

Answer 2

我很确定您没有为铁表元素声明显式尺寸。

从文档 ：

重要提示 ：Iron-List必须以太大小明确，或委托滚动到以明确大小大小的父对象。 “显式调整大小”是指它要么通过类或内联样式设置了显式的CSS height属性，要么通过其他布局方式（例如flex或fit类）进行调整。