聚合物鐵表不更新動態添加上的視圖

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組件中，在這里我修改了項目數組。

我可以注意到的唯一區別是，由於刪除按鈕位於聚合物自定義元素內部，因此單擊該按鈕時，它將使該項目聚焦。

如果我沒有讓自己理解，請詢問，我會澄清。

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

似乎此問題是由以下事實引起的：更改項目數組長度時，Iron-list不會自動更新顯示的項目數。