Javascript 如何在angular&；中为父项和子项应用复选框；引导程序3.3.7

我的要求是：-

当我点击父元素时，它的子元素也被选中，我们也可以取消选择我们不想要的内容。然后单击按钮，我们必须获得所选的父项和子项名称 对象

我至今所做的：-

我创建了一个父项和子项的列表，并为父项提供了复选框，在选中n uncheck并获取值之后获取父项值

我被困在如何选择父对象中的子对象并获取父对象和子对象的值

下面是我的代码

.ts

.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>

{{parent.key}


{{child.key}




获取数据

我的闪电战链接

---

您唯一需要的就是将“children”传递给您的函数

然后在你的函数中，变化变成了

  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
  }

并将（单击）添加到“子项”以更改此选定项

  <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>  

（我放了支票财产，但不是必须的） 你的.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>

已更新将对象添加到此。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>

{{parent.key}


{{child.key}

---

请参见

我在stackblitz中应用了您的逻辑无法获取目标值控制台中的错误您忘记了在外部循环的（更改）中发送孩子<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>

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

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
  }

<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>