Question

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

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

所有这些都以以下格式显示：

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

在updateRule方法中，是否仍然知道哪个复选框已更改？我必须保存，而不是全部保存，我只想保存已更改的内容。

Answer 1

您可以跟踪已检查的规则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>

Component.ts

activeRulesIds= []; // declare and initialize'

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

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

Answer 2

只需将新属性添加到“规则”（例如，您可以调用“更改的”），然后在[ngModel]和（ngModelChange）中拆分[（ngModel）]

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

之后，仅发送rule.changed == true

的规则

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

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

2 个答案: