Блог

У меня есть список флажков, созданный с использованием:

         <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 есть ли возможность узнать, какой из флажков изменился? Я должен сделать сохранение, но вместо того, чтобы сохранять их все, я хочу сохранить только те, которые изменились.

вы можете отслеживать проверенные идентификаторы правил, вы можете сделать это следующим образом :

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

Просто добавьте новое свойство в ваше «правило» (например, вы можете вызвать «измененное») и разделите [(ngModel)] в [ngModel] и (ngModelChange)

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

После этого отправляйте только те правила, которые rule.changed==true

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