嘗試處理從複選框中刪除項目取消選擇

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); 
    } 
} 

現在，第一部分工作。我可以選中其中一個複選框，並將該項目添加到數組中並保存在我的後端。

但是，當我取消選中該項目而不是將其從數組中移除時，該動作也會觸發將新項目添加到數組中。

那麼，我該如何處理消極的情況 - 哪裏的項目沒有選中，因此應該從數組中刪除？我可以定位像「checked」或「！checked」之類的原生HTML屬性嗎？

順便說一句，這是我的HTML /視圖的樣子：

<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); 
    } 
    } 
}