lundi 20 mai 2019

Binding checkboxes ( true, false ) with a Map

I have this variable in my component : weekdays = { 1:"MON", 2:"THU", 3:"WED", 4:"TUE", 5:"FRI", 6:"SAT", 7:"SUN" };

I have a JSON-server which contains price-rules, a price-rule looks like this ( JSON structure ) :

{
    "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
    ]
  }

So I have a model class price-rule, a price-rule is exactly like the JSON structure, except the weekdays attribute. In the JSON, weekdays is an array of number, but in the model, weekdays is a Map Map<number, boolean>

I have this in my 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="">
                    
         </nb-checkbox>
 </div>

What I am trying to do is to bind each checkboxe to each day of pricerule.weekdays. pricerules.weekdays is a Map<number, boolean>

In the JSON price_rule example, weekdays contains all days of the week ( 1 for MON,2 for TUE, ... 7 for SUN ). If I unselect for example the checkbox corresponding to sunday and right after that I apply an update http request to the server, it should look like this :

{
    "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
    ]
  }

And in the model, the value of the KEY 7 has to be false




Aucun commentaire:

Enregistrer un commentaire