如何将选定的多个检查值放入对象数组中

Question

我有一些来自循环的复选框，我需要在点击提交时捕获选定/预选的值，并将其转换为以下格式 .

[
  { name: "parent1", value: ["child11", "child12"] },
  { name: "parent2", value: ["child2"] },
  { name: "parent3", value: ["child3"] }
];

我已经获得了这些值，但是在检查并单击提交按钮之后，但这里我需要获取已在提交按钮上检查的值。下面是代码https://stackblitz.com/edit/angular-b9fmyz?file=src%2Fapp%2Fapp.component.ts

app.component.html

<div class="col-md-3" id="leftNavBar">
      <ul *ngFor="let item of nestedjson">
        <li class="parentNav">{{item.name}}</li>
        <li class="childData">
          <ul>
            <li *ngFor="let child of item.value; let i = index">{{child}}<span class="pull-right"><input type="checkbox" (change)="item.checked[i] = !item.checked[i]" checked ></span></li>
          </ul>
        </li>
      </ul>
      <div><button type="submit" (click)="getit()">submit</button></div>
    </div>

app.component.ts

import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    @Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
      })
    export class AppComponent implements OnInit { 
        data:any;
        nestedjson:any;
        message = '';
        test:any;
     constructor(private formBuilder: FormBuilder) {
         }

      ngOnInit() {
         this.nestedjson = [
        { name: "parent1", value: ["child11", "child12"] },
        { name: "parent2", value: ["child2"] },
        { name: "parent3", value: ["child3"] }
      ];

      this.nestedjson.forEach(v => v.checked = Array(v.value.length).fill(false));
    } 

    getit(){
        const data = this.nestedjson;
        let duplicatePushArray = this.nestedjson.reduce((acc, v) => {
          let temp = {name: v.name, value: []};
          v.checked.forEach((val, i) => {
            if(val){
                temp.value.push(v.value[i]);
            }
          })
          if(temp.value.length > 0){
                acc.push(temp)
          }
          return acc
        }, []);

    console.log('Final Array: ', duplicatePushArray)
   /*output: [{"name":"parent1","value":["child11","child12"]},{"name":"parent2","value":["child2"]},{"name":"parent3","value":["child3"]}]*/
    }
    }

Answer 1

试试这样：

Working Demo

  getit() {
    var duplicatePushArray = [];

    this.nestedjson.forEach(item => {
      console.log(item);
      let checked = [];
      item.checked.forEach((isCkecked, i) => {
        if (isCkecked) {
          checked.push(item.value[i]);
        }
      });
      if (checked.length > 0) {
        duplicatePushArray.push({
          name: item.name,
          value: checked
        });
      }
    });
    console.log("Final Array: ", duplicatePushArray);
  }