Este fragmento en vivo crea un componente web que usa iron-list. Cada elemento de la lista tiene un botón de eliminación que, al hacer clic, elimina el elemento de la lista. Cuando se elimina un elemento, todos los elementos siguientes se desplazan hacia arriba, pero el último elemento mostrado permanece en lugar de desaparecer como debería ser.

Según este stackoverflow, simplemente disparar el evento resize en la lista de hierro debería ser suficiente. Pero en mi fragmento, esto no ayuda. Ni la función iron-resize ni la función notifyResize del iron-list documentación.

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import"  href="https://polygit.org/components/iron-list/iron-list.html">
<link rel="import"  href="https://polygit.org/components/paper-button/paper-button.html">

<dom-module id="my-list">
  <template>

    <iron-list id="list" items="{{items}}">
      
      <template>
        <div style="display:flex; justify-content: space-between; align-items: center;">
          
          <div style="margin: 20px; ">
            {{item}}
          </div>
          
          <paper-button on-tap="_onDeleteClicked"
          style="background: red; color: white;">Remove</paper-button>
        </div>
      </template>
      
    </iron-list>
  
  </template>
  
  <script>
    class MyList extends Polymer.Element {
      static get is() { return "my-list"; }
      
      // set this element's employees property
      constructor() {
        super();
        this.items = [1,2,3,4]; 
      }
      
      _onDeleteClicked(event){
        this.splice("items", event.model.index, 1);
        
        // ---- any resize call doesn't help a thin ---
		this.$.list.fire('iron-resize');
		this.$.list.fire('resize');
		this.$.list.notifyResize();
      }
    }
  customElements.define(MyList.is, MyList);
  </script>

</dom-module>

<my-list></my-list>
0
Yairopro 14 nov. 2017 a las 23:19

2 respuestas

La mejor respuesta

"¡Es simple! La propiedad de visualización css del elemento raíz , en la plantilla de la lista de hierro, no debe establecerse . Luego, simplemente envuelva su flexbox en otro div simple".

Aquí está el fragmento en vivo resuelto:

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import"  href="https://polygit.org/components/iron-list/iron-list.html">
<link rel="import"  href="https://polygit.org/components/paper-button/paper-button.html">

<dom-module id="my-list">
  <template>

    <iron-list id="list" items="{{items}}">
      
      <template>
         <!--YOU MUST NO CHANGE THE CSS DISPLAY PROPERTY OF THE ROOT ELEMENT OF THE TEMPLATE!-->
        <div>

         <div style="display:flex; justify-content: space-between; align-items: center;">
          
          <div style="margin: 20px; ">
            {{item}}
          </div>
          
          <paper-button on-tap="_onDeleteClicked"
          style="background: red; color: white;">Remove</paper-button>
         </div>

        </div>
      </template>
      
    </iron-list>
  
  </template>
  
  <script>
    class MyList extends Polymer.Element {
      static get is() { return "my-list"; }
      
      // set this element's employees property
      constructor() {
        super();
        this.items = [1,2,3,4]; 
      }
      
      _onDeleteClicked(event){
        this.splice("items", event.model.index, 1);
        this.$.list.notifyResize();
      }
    }
  customElements.define(MyList.is, MyList);
  </script>

</dom-module>

<my-list></my-list>
1
tony19 26 mar. 2018 a las 18:51

Puede encontrar un atributo "oculto" en el último elemento. Como los elementos son reutilizados por la lista de hierro cuando se desplaza, el elemento no se elimina. Esta regla CSS debería ocultarla

#list [hidden] { display: none; } 
0
Stefan Reimers 15 nov. 2017 a las 19:41