Polymer Eisen-Liste nicht aktualisieren Ansicht auf dynamische hinzufügen

Question

Ich benutze Polymer 1.7.0 und Angular2, um eine App zu bauen. Ich habe ein benutzerdefiniertes Polymer-Element erstellt, um die Eisenlistenvorlage zu umhüllen, um sie mit Angular2 verwenden zu können, aber ich habe ein Problem, wenn es darum geht, Elemente dynamisch zur Eisenliste hinzuzufügen.

Die Funktion "Hinzufügen" ändert das Array "items", aber das neue Element wird nicht gerendert, selbst wenn das Ereignis "iron-resize" ausgelöst wird, nachdem das Array "items" geändert wurde.

Wenn ich zuerst ein Element lösche und dann versuche, ein Element hinzuzufügen, wird es gerendert.

Dies ist das Polymerelement i verwenden:

<!--.... 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> 

Nach dem Hinzufügen oder Entfernen von einem Element i die updateIronList Funktion aufrufen die Wiedergabe mit dem Eisen-Resize-Ereignis auszulösen.

PS: Die Add-Funktionalität ist in der Parent Angular2-Komponente, wo ich das Element-Array ändern.

Der einzige Unterschied, den ich feststellen konnte, war, dass, da die Schaltfläche zum Löschen innerhalb des benutzerdefinierten Elements "polymer" ist, es das Objekt fokussiert, wenn es angeklickt wurde.

Wenn ich mich nicht verstanden habe, fragen und ich werde klären.

Answer 1

Ich reparierte mein Problem, indem die updateIronList Funktion der Aktualisierung auf:

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

Es ist das Problem scheint durch die Tatsache verursacht wurde, dass, wenn die Länge Artikel Array geändert, angezeigt Eisen-Liste nur knapp sein Ziel automatisch die Anzahl der Elemente aktualisieren .