材质树父节点未按预期工作答案

【问题标题】：Material tree parent node not working as expected材质树父节点未按预期工作
【发布时间】：2019-07-26 23:00:28
【问题描述】：

我做了一个可选择的材质树，最多可选择 42 个元素。当我达到限制 (42) 时，节点将被禁用。问题是当我达到限制并且我从一个家庭中选择了一些孩子并且禁用了一些孩子时，父节点被部分选择，所以当我手动取消选择一个孩子并再次选择父节点时它会很奇怪。

上图不正确。父节点应标记为“全部选中”

上图是正确的

当我取消选择孩子、选择父母和取消选择父母时，会发生这种情况。这是代码。

  descendantsAllSelected(productNodeFlat: ProductNodeFlat): boolean {
    if (this.treeControl.dataNodes) {
      const descendants = this.treeControl.getDescendants(productNodeFlat);
      return descendants.every(child => this.productNodeFlatSelection.isSelected(child));
    }
    return false;
  }

  descendantsPartiallySelected(productNodeFlat: ProductNodeFlat): boolean {
    if (this.treeControl.dataNodes) {
      const descendants = this.treeControl.getDescendants(productNodeFlat);
      const result = descendants.some(child => this.productNodeFlatSelection.isSelected(child));
      return result && !this.descendantsAllSelected(productNodeFlat);
    }
    return false;
  }

【问题讨论】：

标签： angular angular-material angular8

【解决方案1】：

您的“全部选中”函数需要考虑节点是否被禁用，因为全部选中意味着所有子节点都被选中或禁用。我不知道你如何存储禁用状态，所以我在这里使用child.disabled 来表示。比如：

descendantsAllSelected(productNodeFlat: ProductNodeFlat): boolean {
  if (this.treeControl.dataNodes) {
    const descendants = this.treeControl.getDescendants(productNodeFlat);
    return descendants.every(child => 
      this.productNodeFlatSelection.isSelected(child) || child.disabled
    );
  }

  return false;
}

另一种方法是检查选择的数量是否等于允许的最大数量。

你的'部分选中'功能还需要考虑节点是否'禁用'，也可以通过简单检查第一个选中和第一个未选中和未禁用来提高效率。这只需要通过节点进行一次迭代：

descendantsPartiallySelected(productNodeFlat: ProductNodeFlat): boolean {
  if (this.treeControl.dataNodes) {
    let selected = false;
    let unselected = false;
    const descendants = this.treeControl.getDescendants(productNodeFlat);
    return descendants.some(child => {
      if (this.productNodeFlatSelection.isSelected(child)) {
        selected = true;
      }
      else if (!child.disabled) {
        notselected = true;
      }
      return selected && notselected;
    });
  }

  return false;
}

【讨论】：