mardi 19 mai 2020

angular9 display checked radio button and check box from an array of selected codes

I have a JSON array that contains another arraies . each array represents user selections. some are radio-bottun selections and multiple selections as checkbox.

{
 "code" : 9,
"name" : "select bank",
"isMultiSelect" : false,
"children" : [ 
    [ 
        {
            "code" : 91,
            "name" : "branches",
            "isMultiSelect" : true,
            "children" : [ 
                [ 
                    {
                        "code" : 911,
                        "name" : "b11"
                    }, 
                    {
                        "code" : 912,
                        "name" : "b12"
                    }
                ]
            ]
  }]]} 

I want to keep in a separate array everything that the user has selected in all the arraies and in the loading the component what is already selected will be marked.

the radio-list component html code:

<div *ngFor="let children of tagsList.children">

    <div class="col-md-12 row"> 
        <div *ngFor="let child of children;">
          <div class="col-md-12" >
            <label class="container">
              <input class="checkmark"    class="form-control"  type="radio" name="groupName"  id="tagId" [value]="child" 
              [checked] ="itemService.isSelected(child.code)"
              (change)="changeSelectedTags(child, $event);"  [(ngModel)]="tag"  />
               <span class="checkmark"></span>          
                <span style="padding-right: 10px;"></span>  
                  <button class="btn " [hidden]="!child.children" (click)="openMdlChilderTag(child) "> > </button>  

            </label>
          </div> 
        </div>

      </div>
  </div>

in the ts:

 changeSelectedTags( chiledTag: Tag, event) {
    this.itemService.insertSelectedTag(chiledTag.code);
   //TODO:ADD remove function
  }

in the service the array that holdint the selections codes:

 selectedTagsCode: Array<number> = new Array<number>();
 insertSelectedTag(code : number){
   this.selectedTagsCode.push(code); 
  }

isSelected(code:number):boolean{ 
 if(!this.selectedTagsCode)  return false;
 else  return this.selectedTagsCode.some(t => t === code);
}

I can see the selectedTagsCode array is filling up but still, the selected ones are not shown

 [checked] ="itemService.isSelected(child.code)"

does not work do you know why? What is the best way to save and view all selected options? thanks!




Aucun commentaire:

Enregistrer un commentaire