Aurelia在删除项目后没有显示正确的数组表示

Question

我有一个数组中的项目列表。

当我点击我视图中的项目时，我试图删除此项目

查看

<div class="lootItem" repeat.for="lootItem of stack">
    <div class="noselect" click.delegate="$parent.takeItem(lootItem)">
         <i class="fa fa-diamond"></i> ${lootItem.value}
    </div>
</div>

视图模型

takeItem(lootItem){
    this.eventAggregator.publish(new ItemTaken(lootItem));
    console.log(_.includes(this.stack, lootItem)); //true

    _.pull(this.stack, lootItem); //removes item and fails to update the ui
    _.remove(this.stack, lootItem); //removes item and fails to update the ui
    this.stack.shift(); //removes first item and updates the ui
}

.pull()和.remove()（使用lodash）将删除数组中的项但不更新ui。

.shift()设法从数组中删除项目并正在更新UI。

为什么Aurelia在使用lodash时删除项目时没有更新UI？

附录：值得注意的是，如果我点击同一个项目两次，那么_.includes第一次为真，然后第二次为假。

Answer 1

Aurelia可以使用$index变量在转发器内为您提供当前项目的索引。然后，只需使用ES2015提供的内置数组方法：

查看

<div class="lootItem" repeat.for="lootItem of stack">
    <div class="noselect" click.delegate="$parent.takeItem($index, lootItem)">
         <i class="fa fa-diamond"></i> ${lootItem.value}
    </div>
</div>

视图模型

takeItem($index, lootItem){
    this.eventAggregator.publish(new ItemTaken(lootItem));

    this.stack.splice($index, 1);
}

Answer 2

  

使用ES2015设置另一种方法是使用ES2015设置数据   结构体。它可以使用值数组和Set进行初始化   prototype甚至提供了删除特定值的删除方法

     

...

     

但是，集合的语义与常规数组不同。通过   定义，集合是唯一值的集合。因此，它   从不包含重复项。如果你需要一个允许的集合   重复值，集合是错误的数据结构。

     

https://blog.mariusschulz.com/2016/07/16/removing-elements-from-javascript-arrays

我现在正在使用Set for this，它允许我使用.add()和.delete()。我只需要记住，一切都必须是独一无二的（在我的情况下可以这样）

我仍然想知道为什么操纵数组虽然lodash不起作用，但我会在其他时间进行调查。

附录

您也可以使用原型：

interface Array<T> {
   remove(itemToRemove: T): Array<T>;
}

(<any>Array.prototype).remove = function (itemToRemove) {
    const index = this.indexOf(itemToRemove);
    if (index !== -1) {
        this.splice(index, 1);
    }
    return this;
}

Answer 3

我相信你的问题在于变量的范围。

_.draw和_.remove返回一个新的数组实例。

尝试

this.stack = _.remove(this.stack, lootItem);