使用 Map<number, boolean> 绑定复选框 ( true, false )答案

【问题标题】：Binding checkboxes ( true, false ) with a Map<number, boolean>使用 Map<number, boolean> 绑定复选框 ( true, false )
【发布时间】：2019-10-06 17:05:27
【问题描述】：

我的组件中有这个变量： weekdays = { 1:"MON", 2:"TUE", 3:"WED", 4:"THU", 5:"FRI", 6:"SAT", 7:"SUN" };

我有一个包含price-rules 的 JSON 服务器，price-rule 看起来像这样（JSON 结构）：

{
    "id": "1",
    "activity": "Tennis",
    "duration": "60",
    "isIndoor": true,
    "surface": "code",
    "hourStart": "08:00",
    "hourEnd": "18:00",
    "price": "1656",
    "currency": "EUR",
    "weekdays": [
      1,
      2,
      3,
      4,
      5,
      6,
      7
    ]
  }

所以我有一个模型类price-rule，一个price-rule 与JSON 结构完全一样，除了weekdays 属性。在 JSON 中，weekdays 是一个数字数组，但在模型中，weekdays 是一个 Map Map<number, boolean>

我的 HTML 中有这个：

<div class="inline" *ngFor="let day of weekdays | keyvalue">
         <nb-checkbox (click)="change(pricerule.id)" [(ngModel)]="pricerule.weekdays.get(+day.key)" status="success" value="{{ isSelected(day.key, pricerule.weekdays) }}">
                    {{ day.value }}
         </nb-checkbox>
 </div>

我要做的是将每个复选框绑定到pricerule.weekdays 的每一天。 pricerules.weekdays 是 Map<number, boolean>

在 JSON price_rule 示例中，weekdays 包含一周中的所有天（1 表示 MON，2 表示 TUE，... 7 表示 SUN）。例如，如果我取消选择对应于星期日的复选框，然后我将更新 http 请求应用到服务器，它应该如下所示：

{
    "id": "1",
    "activity": "Tennis",
    "duration": "60",
    "isIndoor": true,
    "surface": "code",
    "hourStart": "08:00",
    "hourEnd": "18:00",
    "price": "1656",
    "currency": "EUR",
    "weekdays": [
      1,
      2,
      3,
      4,
      5,
      6
    ]
  }

并且在模型中，KEY 7 的值必须为 false

【问题讨论】：

标签： json angular checkbox binding

【解决方案1】：

您可以在复选框上使用 ngModelChange 事件。查看Stackblitz上的示例

【讨论】：

你能解释一下什么是$event
$event 是角度元素的特定参数。它为复选框返回一个新值。我们必须使用它，因为它会在 ngModel 更改之前触发。