Question

我正在尝试根据Angular 2应用程序中是否选中了复选框来处理从数组中推送和删除元素。我知道原生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属性，例如“已检查”或“！已检查”或类似内容吗？

顺便说一下，这就是我的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);
    }
  }
}

尝试使用Checkbox De-Select处理从数组中删除项目

1 个答案: