聚合物鐵單迭代，但不打印

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類）進行調整。