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

Question

我已经完成了一个材料树的选择，最多可以选择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;
  }

Answer 1

您的“所有选定的”功能需要考虑是否禁用了该节点，因为所有选定的意味着所有的子节点都被选定为或已禁用。我不知道您如何存储禁用状态，因此我在这里使用{draw: 1, recordsTotal: 3, recordsFiltered: 3,…} data: [{activitydate: "2019-07-08", producidos: 1693, muertos: 0, propagados: 2, stock: 1691},…] 0: {activitydate: "2019-07-08", producidos: 1693, muertos: 0, propagados: 2, stock: 1691} 1: {activitydate: "2019-07-05", producidos: 18, muertos: 0, propagados: 0, stock: 18} 2: {activitydate: "2019-07-04", producidos: 14, muertos: 0, propagados: 0, stock: 14} draw: 1 input: {draw: "1", columns: [{data: "id", name: null, searchable: "false", orderable: "false",…},…],…} recordsFiltered: 3 recordsTotal: 3 来表示。像这样：

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