Проблема установки неопределенного значения родительского флажка в группе

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