Question

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

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：添加功能在父Angular2组件中，我修改items数组。

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

如果我没有让自己明白，请问，我会澄清。

Answer 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; 
      },

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

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

1 个答案: