更改内容高度时，铁列表高度不更新

Question

我有这个聚合物元素，其中显示了一个项目列表。我用iron-list 填充列表。每个列表项都包含一个paper-card，它隐藏了一些其他自定义元素，当我单击一个按钮时，将显示相应的视图。这部分的一切工作正常。

我遇到的问题是，当我显示自定义元素或隐藏元素时，铁列表项高度不会更新。当我显示元素时，该元素将显示在其他视图后面，当我隐藏时，会出现一个高度等于显示视图高度的空白。

下面是列表的代码，

<div on-click="clicked" id="feedlist">
<iron-list items="{{feedList}}" as="item">
    <template>
        <card-element field="{{item.id}}" feed-id="{{item.id}}" feed-number="{{item.id}}" feed-title="{{item.title}}" feed-name="{{item.name}}" date="{{item.timeStamp}}"></card-element>
    </template>
 </iron-list>

card-element 的代码如下所示

 <div class="content" id="content">
                <text-input id="note" type="1" note="{{response.note}}" feed-id="[[feedId]]"></text-input>
                <data-viewer id="dataViewer" plugin-data="{{response.data}}" feed-id="[[feedId]]" default-view="gridView" parent="feed"></data-viewer>
                <comment-view id="comment" comments="{{response.comment}}" feed-id="[[feedId]]"></comment-view>
            </div>

我隐藏和显示，文本输入，数据查看器和评论视图​​或根据按钮点击一次。

下面是切换数据查看器的代码，

toggleDataView: function (event) {
        event.stopPropagation();
        if (this.isFeed) {
            this.isDataView = false;
            this.isFeed = false;
        }
        this.isDataView = !this.isDataView;
        if (this.isDataView) {
            this.isComment = false;
            this.isNote = false;
            this.$.note.hide();
            this.$.comment.hide();
            this.$.dataViewer.show();
            this._showDragView();
        } else {
            this.$.dataViewer.hide();
            this._hideDragView();
        }
    },

Answer 1

我认为您需要在更新项目后致电updateSizeForItem(item) https://elements.polymer-project.org/elements/iron-list#method-updateSizeForItem（查看、隐藏...）