javascript - 尝试使用复选框取消选择处理从数组中删除项目

Question

我正在尝试根据 Angular 2 应用程序中是否选中复选框来处理从数组中推送和删除元素。我知道 native HTML 可以处理某种形式的这种逻辑，但我正试图找出确切的目标。这是我的函数的样子:

private onOptionSelected(option)
{
    let optionObj = {
        option: option,
        complex: false
    };

    if (option)
    {
        this.record.requestedOptions.push(optionObj);
    }
    else if (!option)
    {
        this.record.requestedOptions.splice(option);
    }
}

现在，第一部分有效。我可以选中其中一个复选框，该项目将添加到数组并保存在我的后端。

但是，当我取消选中该项目而不是将其从数组中删除时，该操作还会触发将新项目添加到数组中。

那么我该如何处理这里的负面情况——一个项目未被选中，因此应该从数组中删除？我可以定位原生 HTML 属性，例如“checked”或“!checked”或类似的东西吗？

顺便说一下，这是我的 html/view 的样子:

    <div>
       <md-checkbox 
          (change)="onOptionSelected('A')">Option A
       </md-checkbox>

       <md-checkbox
         (change)="onOptionSelected('b')">Option B
       </md-checkbox>

       <md-checkbox
         (change)="onOptionSelected('c')">Option C
       </md-checkbox>
   </div>

Answer 1

您编写代码的方式有几个问题。 - 不发送选项值，而是在范围内传递事件参数。 - splice 的语法不正确 - Check reference

改变

(change)="onOptionSelected('A')">Option A

到

(change)="onOptionSelected($event)">Option A

JS

private onOptionSelected(e) {
  let optionValue = e.target.innerHTML.split(' ')[1];
  let isChecked = e.target.checked;

  let optionObj = {
    option: optionValue,
    complex: false
  };

  if (isChecked) {
    this.record.requestedOptions.push(optionObj);
  } else {
    // find the element that contains optionValue
    let indexToDelete = undefined;

    this.record.requestedOptions.forEach((obj, currIndex) => {
         if(obj.option === optionValue) {
            indexToDelete = currIndex;
         }
    });

    if(indexToDelete !== undefined) {
       this.record.requestedOptions.splice(indexToDelete, 1);
    }
  }
}