Флажки привязки (true, false) с картой

Question

У меня есть эта переменная в моем компоненте: weekdays = { 1:"MON", 2:"TUE", 3:"WED", 4:"THU", 5:"FRI", 6:"SAT", 7:"SUN" };

У меня есть JSON-сервер, который содержит price-rules, 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<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должно быть ложным

Answer 1

Вы можете использовать событие ngModelChange на своих флажках. Проверьте пример на Stackblitz