角度动态复选框的问题

Question

所以我试图根据我拥有的牌组数量创建多个复选框。
在此示例中，甲板之一称为水果。这些复选框如下所示：

因此，如果用户按下水果按钮，则会检查所有水果对象。 如果用户按下一个按钮，该水果将被标记。

但是，如果我用“水果”按钮选择了所有水果，然后移除了奇异果这样的单个水果。它会从列表中完全删除它，但是我只想取消选中它们：

示例：

但是，如果我检查一个对象并取消选中该对象，则不会发生此问题。

示例：

这是我的堆栈闪电链接：https://stackblitz.com/edit/angular-ivy-pwgfng?file=src/app/app.component.ts
如果有人想看看。

如果有任何疑问，请问。我很乐意答复。

Answer 1

问题出在与数组有关。

当您选择chosenDecks以外的甲板时，此代码将运行：

this.chosenDecks.push(selectedDeck);

因此，allDecks的卡片组将与数组引用一起添加。

未选中某水果时，稍后在您的splice types数组上

this.chosenDecks[deckIndex].types.splice(typeIndex, 1);

防止从this.allDecks数组中删除该水果的解决方案是：

this.chosenDecks.push({...selectedDeck, types: selectedDeck.types.slice()});

或任何其他将复制数组而无需引用的内容：-）