Question

此实时代码段构建了一个使用iron-list的网络组件。列表中的每个项目都有一个删除按钮，单击该按钮可从列表中删除该项目。删除某个项目后，所有下一个项目都会向上移动，但显示的最后一个项目会保留而不是应该消失。

根据this stackoverflow，仅仅通过在铁列表上触发事件resize就足够了。但在我的片段中，这没有用。来自官方iron-resize documentation的iron-list或notifyResize函数。

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

Answer 1

＆＃34;很简单！根元素的 css显示属性，在铁列表的模板中，不得设置。然后将你的flexbox包装在另一个简单的div中。＆＃34;

这里解决了实时摘录：

＆＃13;
＆＃13;
show: string = 'product';
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可能会发现＆＃34;隐藏＆＃34;最后一项的属性。当滚动时项目被铁列表重复使用时，项目不会被删除。这个CSS规则应该隐藏它

#list [hidden] { display: none; }

聚合物 - 如何从铁列表中删除项目？

2 个答案: