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()設法從數組中刪除項目，並更新所述用戶界面。

爲什麼Aurelia在使用lodash時不會更新UI？

附錄：可能值得注意的是，如果我點擊相同的物品兩次，那麼_.includes第一次爲真，然後第二次爲假。

Answer 1

Aurelia路上可以爲您提供當前項目的索引。然後，只需使用內置的陣列中的方法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設置數據 結構。它可以與值數組進行初始化，並設置 原型甚至提供了刪除方法用於去除特定值

...

然而，組語義是從規則陣列不同。通過定義 ，一組是唯一值的集合。因此，它不會包含重複項。如果您需要允許重複值爲 的集合，則集合是錯誤的數據結構。

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

我現在用一組這一點，它允許我使用.add()和.delete()。我只需要記住，一切都必須是獨特的（在我的情況下，在這裏）

我仍然想明白爲什麼操縱數組雖然lodash不起作用，但我會調查一下其他時間。

---

附錄

您還可以使用原型：當一箇中繼器內使用$index變量

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

我相信你的問題就出在變量的作用域。

_.pull和_.remove正在返回一個數組的新實例。

你爲什麼要使用lodash時ES2015具有此功能內置嘗試

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