如何以角度 7 将数组元素推入对象

Question

我有一些复选框，其值来自使用 ngFor 的 json。当我选择这些复选框并单击提交时，我需要以代码部分输出中提到的对象数组的形式捕获“li”标记值和选定的复选框值。在这里，我只得到数组中的“li”标签值/文本，但我没有得到如何将它与选定的复选框值（如输出格式）一起推送到对象中。这是下面的代码。

home.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">{{child}}<span class="pull-right"><input type="checkbox"></span></li>
          </ul>
        </li>
      </ul>
      <div><button type="submit" (click)="getit()">submit</button></div>
    </div>

home.component.ts

  import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import Speech from 'speak-tts';
     import { RxSpeechRecognitionService, resultList, } from '@kamiazya/ngx-speech-recognition';
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css'],

      providers: [ RxSpeechRecognitionService ]
    })
    export class HomeComponent implements OnInit { 
        data:any;
        nestedjson:any;
        message = '';
        test:any;
     constructor(private formBuilder: FormBuilder,public service: RxSpeechRecognitionService) {
         }

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

    getit(){
        const data = this.nestedjson;
        let duplicatePushArray = [];
    for(let i = 0; i < data.length ; i++){
      if(duplicatePushArray.indexOf(data[i].name) === -1) {
        duplicatePushArray.push(data[i].name);
      } else {
        console.log(`${data[i]} is already pushed into array`);
      }
    }    
    console.log('Final Array: ', duplicatePushArray)
   /*output: [{"name":"parent1","value":["child11","child12"]},{"name":"parent2","value":["child2"]},{"name":"parent3","value":["child3"]}]*/
    }

    }

Answer 1

当复选框被选中时，您不会发生任何事情。我建议添加一个 onChange 绑定，以便您可以将所有选中的子项保存到一个数组中，当您单击提交时可以引用该数组。

home.component.html

  <li *ngFor="let child of item.value">{{child}}
    <span class="pull-right">
      <input type="checkbox" (change)="addtoChecked(child)">
    </span>
  </li>

home.component.ts

private checkedChildren = <string[]>[];
public addToChecked(child: string): void {
  if(this.checkedChildren.indexOf(child) > -1){ // you can also pass in the $event from the html to this method to determine if it was checked or not
    this.checkedChildren = this.checkedChildren.filter(c => c !== child);
  } else {
    this.checkedChildren.push(child);
  }
}

getit(): void {
  const output = <{name: string, value: string[]}[]>[];
  this.checkedChildren.forEach((child) => {
    const jsonData = this.nestedjson.find(j => j.value.indexOf(child) > -1);
    if(!jsonData) {
      // something went wrong
      return;
    }

    const existingDataIndex = output.findIndex(o => o.name == jsonData.name);
    if(existingDataIndex === -1){
      output.push({ name: jsonData.name, value: [child]});
    } else {
      output[existingDataIndex].value.push(child);
    }
  });
  console.log(output);
}

Answer 2

要达到预期的效果，请使用以下选项，为复选框使用 reduce 和选中标志

1. 将选中的数组添加到原始数组以跟踪选中的框

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

2. 根据选中的复选框更新了选中值的数组

3. 通过仅过滤掉选中的框来使用 reduce 更新的 Final 数组

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 }, []);

更新了以下 app.component.html 和 app.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]"></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"]}]*/
    }
    }

示例工作代码供参考 - https://stackblitz.com/edit/angular-b9fmyz?file=src/app/app.component.html