Question

我的组件中有此变量： 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属性之外，weekdays与JSON结构完全一样。在JSON中，weekdays是一个数字数组，但是在模型中，weekdays是一个映射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包含一周中的所有天（MON为1，TUE为2，SUN为7）。例如，如果我取消选择与周日相对应的复选框，然后在此之后我将更新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
    ]
  }

在模型中，密钥7的值必须为false

Answer 1

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

上的示例

使用Map <number，boolean =“”>绑定复选框（true，false）

1 个答案: