如何將選中/未選中復選框的值捕獲/控制台到 angular 中的 object 數組中

Question

我有一些帶有父子結構的復選框，其值來自循環。在這里，當我單擊提交按鈕時，我需要將選定/未選定的值捕獲為以下格式（稱為注釋輸出）。 當我為預選值單擊提交時工作正常，但是如果我從 html 中刪除檢查（在頁面加載時未選中）並單擊提交，它會顯示空數組。根據我在項目中的要求，有時所有復選框都會被預選，有時很少選擇/少數未選擇，有時所有都將根據條件未選擇，我需要在提交時捕獲選擇/未選擇的值（與輸出相同）。 這是演示下面的代碼 - https://stackblitz.com/edit/angular-ar5apb?file=src%2Fapp%2Fapp.component.html

app.component.html

 Checkbox - 
    <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 checked 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";

@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() {}

  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(true))
    );
  }
  getit() {
    var duplicatePushArray = [];

    this.nestedjson.forEach(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);
  /*  output: [{"name":"parent1","value":["child11","child12"]},{"name":"parent2","value":["child2"]},{"name":"parent3","value":["child3"]}]*/
  }
}

Answer 1

<input type="checkbox" [checked]="item.checked[i]" (change)="item.checked[i] = $event.target.checked">

或嘗試模板 forms

<input type="checkbox" [name]="'checked_' + i" [(ngModel)]="item.checked[i]">

確保導入 forms 模塊

這是一個 reduce function，它以一個空數組開頭，根據檢查的數組過濾值，如果檢查結果中有任何檢查結果，則將新的 object 推送到結果中。

getit() {
  var duplicatePushArray = this.nestedjson.reduce((results, item) => {
    const checked = item.value.filter((value, index) => item.checked[index]);
    if (checked.length) {
      results.push({ name: item.name, value: checked });
    }
    return results;
  }, []);
  console.log("Final Array: ", duplicatePushArray);
}

這是 StackBlitz https://stackblitz.com/edit/angular-aasetj?file=src/app/app.component.ts的更新