角度不确定复选框

Question

我有一个 AngularJS (1.5) 设置，用于使父复选框不确定是否选择了它的一个子项，以及如果选择了父项，则选择所有子项。

我在将旧的 ES5 JS 转换为 typescript 时遇到问题。

这是旧控制器：

  var _this = this;

_this.hierarchicalData = [
  {
    id: 0,
    label: 'Parent item',
    checked: false,
    children: [
      { id: 0, label: 'Child one', value: 'child_one', checked: false },
      { id: 1, label: 'Child two', value: 'child_two', checked: false },
      { id: 2, label: 'Child three', value: 'child_three', checked: false }
    ]
  }
];

_this.selectedChildren = [];
_this.isIndeterminate = false;
_this.allRowsSelected = false;

_this.selectChildren = function (data, $event) {
  var parentChecked = data.checked;
  angular.forEach(_this.hierarchicalData, function (value, key) {
    angular.forEach(value.children, function (value, key) {
      value.checked = parentChecked;
    });
  });
};

_this.selectChild = function (data, $event) {
  if (_this.selectedChildren.indexOf(data.id) === -1) {
    _this.selectedChildren.push(data.id);
    data.selected = true;
  } else {
    _this.selectedChildren.splice(_this.selectedChildren.indexOf(data.id), 1);
    _this.allRowsSelected = false;
    data.selected = false;
  }
};

// for the purposes of this demo, check the second child checkbox
_this.selectedChildren.push(1);
_this.hierarchicalData[0].children[1].checked = true;

和旧模板：

 <ul class="list-nomarkers">
  <li ng-repeat="parent in check.hierarchicalData">
    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="parent.checked" ng-click="check.selectChildren(parent, $event)" ui-indeterminate="check.selectedChildren.length">{{parent.label}}
      </label>
    </div>
    <ul class="list-nomarkers">
      <li ng-repeat="child in parent.children">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="child.checked" ng-click="check.selectChild(child, $event)"> {{child.label}}
          </label>
        </div>

      </li>
    </ul>
  </li>
</ul>

我更新了 Angular 5（和 Bootstrap 4）的模板：

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

并为组件添加了2个主要功能：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'pb-ds-checkboxes',
  templateUrl: './checkboxes.component.html'
})
export class CheckboxesComponent implements OnInit {
  hierarchicalData = [
    {
      id: 0,
      label: 'Parent item',
      checked: false,
      children: [
        { id: 0, label: 'Child one', value: 'child_one', checked: false },
        { id: 1, label: 'Child two', value: 'child_two', checked: false },
        { id: 2, label: 'Child three', value: 'child_three', checked: false }
      ]
    }
  ];
  selectedChildren = [];
  isIndeterminate = false;
  allRowsSelected = false;
  constructor() {}

  ngOnInit() {}

  selectChildren = function(data, $event) {
    const parentChecked = data.checked;
    angular.forEach(this.hierarchicalData, function (value, key) {
      angular.forEach(value.children, function (value, key) {
        value.checked = parentChecked;
      });
    });
  };

  selectChild = function(data, $event) {
    if (this.selectedChildren.indexOf(data.id) === -1) {
      this.selectedChildren.push(data.id);
      data.selected = true;
    } else {
      this.selectedChildren.splice(this.selectedChildren.indexOf(data.id), 1);
      this.allRowsSelected = false;
      data.selected = false;
    }
  };
}

显然，我需要将旧的angular.forEach 转换为 ES6，但我在箭头函数方面仍然有点弱。有人可以在正确的方向上轻推我吗？

Answer 1

通过将所有值替换为正确的类型，确保为每个声明的值转换类型。箭头函数可以替换您的 ES5 函数。

selectChildren: <TYPE> = (data:<TYPE>, event:<TYPE>) => {
        const parentChecked <TYPE> = data.checked;
        this.hierarchicalData.forEach((value, key) => {
          value.children.forEach((value2, key2) => {
            value2.checked = parentChecked;
          });
        });
      };

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