Angular 角度复选框仅保存已更改的

我有一个使用以下方法构建的复选框列表：

        <div *ngFor="let rule of rules">
      <div class="form-check">
        <input type="checkbox" [(ngModel)]="rule.isActive" name="{{rule.ruleId}}" id="{{rule.ruleId}}" class="form-check-input">
        <label class="form-check-label"> {{rule.description}} - {{rule.message}}</label>
      </div>
    </div>

{{rule.description}}-{{rule.message}

所有这些都在以下表格中：

<form #ruleForm="ngForm" (ngSubmit)="updateRule(ruleForm.value)" novalidate>

---

在updateRule方法中，是否仍然需要知道哪些复选框已更改？我必须进行保存，但不是将它们全部保存，而是只保存已更改的规则。

您可以跟踪选中的规则id，您可以通过以下方式执行此操作：

component.html

  <div *ngFor="let rule of rules">
     <div class="form-check">
        <input type="checkbox" (change)="onCheck($event,rule.ruleId)" [checked]="rule.isActive"  value="{{rule.ruleId}}" name="{{rule.ruleId}}" id="{{rule.ruleId}}" class="form-check-input">
     <label class="form-check-label"> {{rule.description}} - {{rule.message}}</label>
    </div>
  </div>

---

只需向“规则”（例如，您可以调用“changed”）添加一个新属性，然后在[ngModel]和（ngModelChange）中拆分[（ngModel）]

---

您可以发布规则的示例数据吗？此代码仅在检查规则时推入ActiveRuleSid，而不是更改规则。我认为使用辅助变量、[checked]和（change）是对角度的拙劣使用。当然，代码是有效的，但就我个人而言，我倾向于“更具角度的回答”

activeRulesIds= []; // declare and initialize'

...........
...........
...........

onCheck(event, $value) {
    if (event.target.checked) {
      this.activeRulesIds.push($value);
    }
    else {
      this.activeRulesIds.splice(this.activeRulesIds.indexOf($value), 1);
    }
 }

<input type="checkbox" [ngModel]="rule.isActive" 
  (ngModelChange)="rule.changed=true;rule.isActive=$event">

  const send=rules.filter(x=>x.changed);