Javascript 使用复选框交互运行函数

我正在尝试创建复选框，选中该复选框时会将对象添加到数组中，但选中该复选框时会删除该对象。我不确定这是否是正确的方法，但我将在下面展示我所拥有的。顺便说一下，使用角度2

原始代码：

  <div>
   <ul>
    <a *ngFor="let perkResult of perkList.results" (click)="onAddPerk(perkResult)">
     <li>{{ perkResult.perk }}</li>
     </a>
   </ul>
  </div>

  <div *ngFor="let perk of company.perks;>
     {{ perk.perk }}
    <a (click)="onDeletePerk(i)"></a>
  </div>

我想这样做：

  <div *ngFor="let benefitResult of benefitList.results" >
     <a (click)="onAddBenefit(benefitResult)">
      <input type="checkbox"  />   
     //Basically if checked then run add function, if not checked then run delete function
     </a> {{ benefitResult.benefit }}
   </div>

//基本上，如果选中，则运行添加功能，如果未选中，则运行删除功能
{{benefitResult.benefit}

编辑：

到此为止，但无法引用我的其他删除范围

  <ul *ngIf="benefitList">
   <div *ngFor="let benefitResult of benefitList.results; let i = index" >
    <input type="checkbox" (change)="updateBenefits($event, benefitResult, i)" >
     <li>
      {{ benefitResult.benefit }}
     </li>
     </div>
    </ul>


  //Original delete
  <div *ngFor="let benefit of company.benefits; trackBy: customTrackBy; let i = index">
    {{benefit.benefit}}
     <a (click)="onDeleteBenefit(i)"></a>
   </div>

 //function
  updateBenefits(event, benefitResult, i) {
   if(event.srcElement.checked) {
    this.company.benefits.push({benefit: (benefitResult.benefit)});
   } else {
    this.company.benefits.splice(i, 1);
   }
  }

{{benefitResult.benefit}


//原始删除
{{benefit.benefit}
//作用
更新利益（事件、利益结果、i）{
if（event.srcmelement.checked）{
this.company.benefits.push（{benefit：（benefitResult.benefit）}）；
}否则{
本.公司.利益.拼接（i，1）；
}
}

您可以收听复选框上的

更改事件。然后将事件连同对象和索引一起传递给一个方法，该方法将查看checkbox元素的状态

在组件中：

optionsList = {
    results: [{
        perk: 'free coffee',
        checked: false
    }, {
        perk: 'car',
        checked: false
    }, {
        perk: 'pastry',
        checked: false
    }, {
        perk: 'free post-it notes',
        checked: false
    }]
};

updatePerks(event, perkResult) {
    perkResult.checked = event.srcElement.checked;
}

在HTML模板中：

<ul>
    <li *ngFor="let listItem of optionsList.results">
        <label><input type="checkbox" (change)="updatePerks($event, listItem)">
        {{ listItem.perk }}</label>
    </li>
</ul>



{{listItem.perk}}



注意：我不知道您的数据结构，因此，如果需要更多帮助，请进行必要的调整或发布数据示例。
因此，我似乎无法删除。我想我进入了一个不同的领域。我该如何引用它？我将在edit中添加我当前的代码我认为原因是我正在将一个对象从不同的数组推送到公司数组中。因此，当我想删除时，我需要从公司列表中删除一个，而不是从另一个列表中删除。我明白了。此.company.perks.splice无效，因为索引是另一个列表中的索引。您可以只拥有一个对象列表，每个对象都有一个“选中”属性。我将发布一个示例。
<ul>
    <li *ngFor="let listItem of optionsList.results">
        <label><input type="checkbox" (change)="updatePerks($event, listItem)">
        {{ listItem.perk }}</label>
    </li>
</ul>