Question

我正在尝试创建复选框，以便在选中时将对象添加到数组，但在取消选中时将删除该对象。我不确定这是否是正确的方法，但会显示我在下面的内容。顺便使用Angular 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>

功能：

 onAddPerk(perkResult) {
    // Adds a new perk to the array
  this.company.perks.push({perk: (perkResult.perk)});
 }

 onDeletePerk(i: number) {
   // Delete the perk in the selected index
   this.company.perks.splice(i, 1);
 }

我想做这样的事情：

  <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>

编辑：

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

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

Answer 1

您可以在复选框上收听change事件。然后将事件以及对象和索引传递给将查看复选框元素状态的方法。

在组件中：

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>

注意：我不知道您的数据结构，因此如果您需要更多帮助，请进行必要的调整或发布数据样本。

使用复选框交互运行函数

1 个答案: