как установить флажки для родителей и детей в angular & bootstrap 3.3.7

Question

вот мое требование: -

когда я нажимаю на родителя, его дочерние элементы также выбираются, и в этом случае мы также можем отменить выбор того, что нам не нужно.И по нажатию кнопки мы должны получить выбранные имена родителей и детей как объект

что я делал до сих пор: -

я создал список родителей и детей и поставил флажокдля родителя и получения родительских значений после проверки снимите флажок и получите значение

Я застрял, как я могу выбрать дочерних элементов в этом родителе и получить значения как родителя, так и дочерних элементов

ниже мойкод

.ts

 @ViewChildren('myItem') item;
  selectedIds = [];
 display:any;
 data:any;

  ngOnInit(){


    // dynamic json 

    this.data = {
  "info": {
    "laptop": {
    },
    "config": {
      "properties": {
        "ram": {
        },
        "processor": {
        },
        "hdd": {

        }
      }
    },
    "link": {

    },
    "name": {

    },
    "company": {
      "properties": {
        "model": {

        },
        "maker": {
          "type": "integer"
        },
        "country": {
          "type": "text"
        },
        "enterprise": {

        }

      }
    }
  }
};


  // varible 

    this.display = this.data['info'];
    console.log(this.display);

  }

  change(data,event){
 if (event.target.checked === true) {
      this.selectedIds.push({id: data, checked: event.target.checked});
      console.log('Selected data ', JSON.stringify(this.selectedIds));
    }
    if (event.target.checked === false) {
      this.selectedIds = this.selectedIds.filter((item) => item.id !== data);
    }


}
getData(){
      const filtered = this.selectedIds.filter(item => item.id)
 console.log(JSON.stringify(filtered));
    }

.html код

<ul class="list-group" *ngFor="let parent of display | keyvalue">
  <li class="list-group-item">  <input  type="checkbox" [value]="parent.key" [(ngModel)]="parent.check"  #myItem  (change)="change(parent.key,$event)">{{parent.key}}</li>
 <ng-container *ngIf="parent.check && parent.value.hasOwnProperty('properties')">
      <ul *ngFor="let child of parent.value.properties | keyvalue">
      <li>
        {{child.key}}
      </li>
      </ul>  
    </ng-container> 
</ul>

<hr>

<button class="btn btn-primary"(click)="getData()">get Data</button>

моя ссылка на стек

https://stackblitz.com/edit/angular-8vqwsc

Answer 1

единственное, что вам нужно, это передать в вашу функцию "children"

(change)="change(parent.key,parent.value.properties,$event)"

, тогда в вашей функции изменение станет как

  change(data, children, event) {
    if (event.target.checked === true) {
      this.selectedIds.push({ id: data, checked: event.target.checked });
      for (let child in children) {
        this.selectedIds.push({ id: child, checked: event.target.checked });
      }
    }
    if (event.target.checked === false) {
      this.selectedIds = this.selectedIds.filter((item) => item.id !== data);
      for (let child in children) {
        this.selectedIds = this.selectedIds.filter((item) => item.id !== child);
      }
    }

Есть проблема, которая показываетвыбранные значения.Для этого вам нужно сделать функцию

  isChecked(child) {
    let item = this.selectedIds.find(x => x.id == child.key)
    return item ? item.checked : false
  }

и добавить (щелкнуть) к «детям», чтобы изменить this.selected

  <ul *ngFor="let child of parent.value.properties | keyvalue">
  <li>
    <input  type="checkbox" [checked]="isChecked(child)" (change)="change(child.key,null,$event)"/>
    {{child.key}}
  </li>
  </ul>  

Но я думаю, что вы лучшеспособ делать вещи.Представьте себе, что ваши данные становятся

this.data2 =[ 
  {
    "id":"laptop","checked":false
    },
    {"id":"config","checked":false,"properties": [
        {"id":"ram","checked":false},
        {"id":"processor","checked":false},
        {"id":"ram","checked":false}
      ]
    },
    {"id":"link","checked":false},
    {"id":"name","checked":false},
    {"id":"company","checked":false,"properties":[
        {"id":"model","checked":false},
        {"id":"maker","checked":false},
        {"id":"country","checked":false},
        {"id":"enterprise","checked":false}

    ]}
]

(я поставил отмеченное свойство, но оно не обязательно) Ваш .html становится более легким

<ul *ngFor="let parent of data2">
  <li><input  type="checkbox" [(ngModel)]="parent.checked" (change)="changedChild(parent.checked,parent.properties)"> {{parent.id}}
      <ng-container *ngIf="parent.checked">
        <ul  *ngFor="let child of parent.properties">
      <li>
        <input  type="checkbox" [(ngModel)]="child.checked" />
        {{child.id}}
      </li>
      </ul>  
      </ng-container>
  </li>
</ul>

И функция изменилаChild

changedChild(value,children)
{
   if (children)
       children.forEach(x=>x.checked=value)
}

Обновлено добавление объекта в this.selectedChild функции становятся

change(data, children, event) {
    if (event.target.checked === true) {
      this.selectedIds.push({ id: data, checked: event.target.checked });
      for (let child in children) {
        this.selectedIds[this.selectedIds.length-1][child]=event.target.checked;

      }
    }
    if (event.target.checked === false) {
      this.selectedIds = this.selectedIds.filter((item) => item.id !== data);
    }

}
changeChild(parentKey,childKey,event)
{
    let item:any = this.selectedIds.find(x => x.id == parentKey)
    if (event.target.checked)
      item[childKey]=event.target.checked;
    else
      delete item[childKey];

}

isChecked(parentKey,childKey) {
    let item:any = this.selectedIds.find(x => x.id == parentKey)
    return item ? item[childKey] : false
  }

И HTML

<ul class="list-group" *ngFor="let parent of display | keyvalue">
  <li class="list-group-item">  <input  type="checkbox" [value]="parent.key" [(ngModel)]="parent.check"  #myItem  (change)="change(parent.key,parent.value.properties,$event)">{{parent.key}}</li>
 <ng-container *ngIf="parent.check && parent.value.hasOwnProperty('properties')">
      <ul *ngFor="let child of parent.value.properties | keyvalue">
      <li>
         <input  type="checkbox" [checked]="isChecked(parent.key,child.key)" (change)="changeChild(parent.key,child.key,$event)"/>
    {{child.key}}

      </li>
      </ul>  
    </ng-container> 
</ul>

См. раздвоенный стек