複選框狀態僅適用於下一個請求

Question

我有這樣的模板：

<h2>Sailing profiles</h2> 
<label *ngFor="let sailingProfile of sailingProfiles"> 
    <input type="checkbox" name="{{sailingProfile.title}}" [(ngModel)]='sailingProfile.checkBoxState' (change)="sendParams()"> 
    {{sailingProfile.title}}<br> 
</label> 
<h2>Counters</h2> 
<label *ngFor=" let counter of counters"> 
    {{counter.type}}: <input type="text" [(ngModel)]='counter.value' (blur)="sendParams()"><br> 
</label> 

而在我的代碼中的複選框狀態只適用於下一個請求。所以我會從沒有選中的複選框開始。然後我檢查一個複選框，並在sendParams（）方法中沒有向params數組添加sailing_profile。然後我檢查另一個複選框，然後添加第一個複選框的sailing_profile，而不是剛選擇的sailing_profile。我是否使用錯誤的事件處理程序，並且是在事件處理程序之後設置的複選框狀態？

sendParams() { 
    let params = {}; 
    params["counters"] = []; 
    params["sailing_profiles"] = []; 

    this.counters.filter(
     c => "value" in c 
    ).forEach(
     c => { 
      params["counters"].push({ 
       "type": c["type"], 
       "value": c["value"] 
      }) 
     } 
    ); 

    this.sailingProfiles.filter(
     s => "checkBoxState" in s && s["checkBoxState"] 
    ).forEach(
     s => { 
      params["sailing_profiles"].push({ 
       "title": s["title"] 
      }) 
     } 
    ); 

    this.paramsUpdated.emit(params); 
} 

Answer 1

的(change)和(click)事件(ngModelChange)事件之前被處理。

改用

<input type="checkbox" name="{{sailingProfile.title}}" 
    [(ngModel)]='sailingProfile.checkBoxState' 
    (ngModelChange)="sendParams()">