如何使用Polymer 1.2.4的铁列表一次删除和取消选择多个项目?

时间:2016-02-14 00:50:17

标签: polymer polymer-1.0

我有一个铁列表,我想提供选择多个项目并立即删除它们的选项。这是我的iron-list multi-selection

<iron-list items="[[users]]" as="user" selected-items="{{selectedUsers}}" multi-selection>
...
</iron-list>

我已经为所选项目数组使用了forEach循环:

_deleteSelected: function(e) {
    this.selectedUsers.forEach(function(user) {
        var index = this.users.indexOf(user);
          if (index != -1) {
              this.splice('users', index, 1);
          }          
    }, this);

    this.querySelector('iron-list').clearSelection();

    console.log(this.selectedUsers);
}

在每个循环中,我计算主项目数组中的项目索引,然后我使用this.splice('items', index, 1)删除它。循环结束后,我使用此this.querySelector('iron-list').clearSelection();清除我的选择并继续前进。但是我的迭代失败了,因为无论我选择了多少项,循环似乎只运行一次。如果我只选择一个项目,那么它将被正确删除并刷新列表。但是这里发生了奇怪的事情,因为现在与我刚删除的项目具有相同索引的项目似乎被检查。例如,我有三个项目,我选择第二个并删除它。现在第二个是之前的第三个项目,但是当所选项目数组为空时,似乎没有任何理由进行检查。我猜这些是因为Polymer使用的数组引用。我如何在铁列表选择中解决这种行为?有没有办法只使用拼接而不必清除所选的项目数组?

我的完整组件示例是here

2 个答案:

答案 0 :(得分:0)

所以问题是你在

上运行for循环
this.selectedUsers

所以你运行这个数组,然后从this.users删除用户,所以现在铁设置this.selectedUsers为[]因为列表是新的。

我的解决方案是写

 this.selectedUsers.slice().forEach(function(user) { ...

因此它创建了新数组,然后这个数组没有改变,因为this.users改变了

答案 1 :(得分:0)

怎么样 -

this.users = this.users.filter(function(u){     return(this.selectedUsers.indexOf(u)== -1); });