问题设置组中父复选框的不确定值

Question

我有一个带有分层数据的JSON文件：

[
  {
    "id": 0,
    "label": "Gap Inc.",
    "value": "Gap Inc",
    "checked": false,
    "children": [
      {
        "id": 0,
        "label": "Banana Republic",
        "value": "Banana Republic",
        "checked": false
      },
      {
        "id": 1,
        "label": "Gap",
        "value": "Gap ",
        "checked": false
      },
      {
        "id": 2,
        "label": "Hill City",
        "value": "Hill City",
        "checked": false
      },
      {
        "id": 3,
        "label": "Old Navy",
        "value": "Old Navy",
        "checked": false
      }
    ]
  },
  {
    "id": 1,
    "label": "Home Depot",
    "value": "Home Depot",
    "checked": false,
    "children": []
  },
  {
    "id": 2,
    "label": "TJX",
    "value": "TJX Companies",
    "checked": false,
    "children": [
      {
        "id": 0,
        "label": "TJ Maxx",
        "value": "TJ Maxx ",
        "checked": false
      },
      {
        "id": 1,
        "label": "Marshalls",
        "value": "Marshalls",
        "checked": false
      },
      {
        "id": 2,
        "label": "Home Goods",
        "value": "Home Goods",
        "checked": false
      }
    ]
  }
]

我正在用它来创建一组带有复选框的嵌套HTML列表：

<ul class="list-unstyled">
  <li *ngFor="let parent of accountList; let q = index">
     <div class="form-check">
         <input id="parent-{{q}}"
                class="form-check-input"
                type="checkbox"
                [(ngModel)]="parent.checked"
                (click)="selectChildren(parent, $event)"
                [indeterminate]="selectedChildren.length">
         <label for="parent-item" class="form-check-label">
           {{parent.label}}
         </label>
     </div>

     <ul class="list-unstyled pl-4">
         <li *ngFor="let child of parent.children; let i = index;">
             <div class="form-check">
                  <input id="child-{{i}}"
                         class="form-check-input"
                         type="checkbox"
                         [(ngModel)]="child.checked"
                         (click)="selectChild(child, $event)">
                  <label for="child-{{i}}" class="form-check-label">
                       {{child.label}}
                   </label>
             </div>
         </li>
     </ul>
   </li>
</ul>

应该怎么办

如果单击父复选框，它将检查所有子复选框。 如果仅单击一个孩子，则其父对象设置为不确定。

会发生什么

如果单击父复选框，它将检查所有子复选框。 如果您仅单击一个孩子，则会将所有父母设置为不确定。

我认为我在某个地方弄砸了。我认为我已经将indeterminate属性映射到所选的任何个孩子（此处为selectedChildren而不是给定父级的孩子的长度。不确定如何解决此问题。 ..

这是打字稿：

selectedChildren = [];

selectChildren = function(data, event) {
    const parentChecked = !data.checked;
    data.children.forEach((child, key2) => {
      child.checked = parentChecked;
    });
  };

  selectChild = (data, event) => {
    if (this.selectedChildren.indexOf(data.id) === -1) {
      this.selectedChildren.push(data.id);
      data.checked = true;
    } else {
      this.selectedChildren.splice(this.selectedChildren.indexOf(data.id), 1);
      data.checked = false;
    }
  };