Angular 14中如何按条件向对象数组推值并避免重复

原代码的核心问题在于添加逻辑错误：遍历selectedPieces数组时，只要遇到与当前subModule的pieceId不同的元素就执行push，这会导致同一subModule被多次插入（数组里有多少个不同id的元素，就会被push多少次）。另外移除元素时用splice(i)会删除从索引i到数组末尾的所有元素，而不是只删除目标元素。

简化逻辑，先判断元素的激活状态，再分别处理添加/移除操作：

// Pieces 对象定义
const Pieces = {
  pieceId: 1,
  img: '../../../../assets/img/piece.PNG',
  letter: 'O',
  active: false,
  activeli: false // 补充原代码里用到的activeli属性
}

activateClass(subModule) {
    // 切换激活状态
    subModule.active = !subModule.active;  
    subModule.activeli = !subModule.activeli; 

    // 查找当前元素在选中数组中的索引
    const existingIndex = this.selectedPieces.findIndex(item => item.pieceId === subModule.pieceId);

    if (subModule.active) {
        // 激活状态：如果元素不在数组中则添加
        if (existingIndex === -1) {
            this.selectedPieces.push(subModule);
        }
    } else {
        // 取消激活：如果元素在数组中则移除
        if (existingIndex !== -1) {
            this.selectedPieces.splice(existingIndex, 1);
        }
    }

    console.log(this.selectedPieces);
}

• 使用findIndex快速定位元素，避免遍历数组时重复添加的问题
• 移除元素时用splice(existingIndex, 1)精准删除单个元素，而不是删除后续所有元素
• 逻辑拆分清晰，先判断激活状态，再处理添加/移除，避免原代码中复杂的分支和循环导致的错误

内容的提问来源于stack exchange，提问作者tripti tiwari