聚合物铁列表不更新动态添加视图答案

【问题标题】：Polymer iron-list not updating view on dynamic add聚合物铁列表不更新动态添加视图
【发布时间】：2016-11-17 11:15:43
【问题描述】：

我正在使用 Polymer 1.7.0 和 Angular2 来构建应用程序。我创建了一个自定义 Polymer 元素来包装 iron-list 模板，以便能够将它与 Angular2 一起使用，但是在动态添加项目到 iron-list 时我遇到了问题。

add 函数修改了 items 数组，但即使我在修改 items 数组后触发了 iron-resize 事件，它也不会渲染新元素。

如果我先删除一个项目，然后尝试添加一个元素，那么它就会被渲染。

这是我使用的聚合物元素：

<!--.... dependencies imports .... -->
<dom-module id="role-users-list">
  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment custom-layout-classes">
     :host {
        display: block;
      }
    </style>
    <iron-media-query query="(min-width: 600px)" on-query-matches-changed="queryValueChanged" query-matches="{{wide}}"></iron-media-query>
    <iron-list items="{{items}}" class="test" style="height:85%">
        <template>
            <paper-card class="verticalJustified"> 
            <div class="horizontalJustified">
                <div class="card-content horizontalJustified">
                  <paper-icon-button class="cardIcons" icon="group-work"></paper-icon-button>
                  <div class="verticalStart">
                      <span class="cardTitle">{{item.fullName}}</span>
                      <template is="dom-if" if="{{item.direct}}">
                        <span class="cardSubTitle">User associated directly </span>
                      </template>
                      <template is="dom-if" if="{{!item.direct}}">
                        <span class="cardSubTitle">Role granted through {{item.groupName}} </span>  
                      </template>
                  </div>
                </div>
                <template is="dom-if" if="{{item.direct}}">
                  <div class="horizontalJustified"> 
                      <paper-icon-button class="cardIcons" icon="delete" target-user="{{item.username}}" on-tap="onDelete" (click)="deleteUser(user)"></paper-icon-button>
                  </div>
                </template>
            </div>
            </paper-card>
        </template>
    </iron-list>
  </template>
  <script>
    Polymer({
      is: 'role-users-list',
      onDelete: function(e){
        this.fire("deleteTrigger",{data:e.model.item});
      },
      queryValueChanged: function(e){
        this.fire("mediaQueryTrigger",{data: e.detail.value})
      },
      updateIronList:function(){
        this._nodes.filter(function(value){return value.localName === "iron-list"})[0].fire("iron-resize");
      },
      focusElem:function(){
        var test = this._nodes.filter(function(value){return value.localName === "iron-list"})[0];
        test.selectItem(this.items[0]);
      },
      properties: {
        items: {
          type: Array,
          notify: true,
          value:[],
        }
       }
    });
  </script>
</dom-module>

添加或删除一个元素后，我调用 updateIronList 函数以使用 iron-resize 事件触发渲染。

PS：添加功能在我修改 items 数组的父 Angular2 组件中。

我能注意到的唯一区别是，由于删除按钮位于聚合物自定义元素内，它会导致它在单击该项目时聚焦该项目。

如果我没有让自己理解，问，我会澄清。

【问题讨论】：

标签： javascript angular polymer

【解决方案1】：

我通过将 updateIronList 函数更新为：

updateIronList:function(){
        let ironListElem = this._nodes.filter(function(value){return value.localName === "iron-list"})[0];
        ironListElem.fire("iron-resize");
        ironListElem._virtualCount = (this.items.length <= 20) ? this.items.length : 20; 
      },

问题似乎是由于当 items 数组长度发生变化时，iron-list 没有自动更新显示的项目数。

【讨论】：