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（）方法中，没有将sailing_profile添加到params数组中。然后我检查另一个复选框，然后添加第一个复选框的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()">

复选框状态仅在下次请求时可用

1 个答案: