Question

我有一个AngularJS（1.5）设置，如果选中其中一个子节点，则选中父节点不确定，如果选择了父节点，则选择所有子节点。

我无法将旧的ES5 JS转换为打字稿。

这是旧控制器：

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

角度不确定复选框

1 个答案: