无法在初始化时使用 Angular2-tree 选中树中的所有复选框

Question

>目标：我有一个名为"feed数据"的按钮，所以当我单击它时，数据将被加载，我的意思是这里有复选框的树，我的要求是当我单击它以及数据时，必须选中所有复选框 初始化我尝试使用

 this.treeComp.treeModel.doForAll((node: TreeNode) => node.setIsSelected(true));

但它不起作用下面是我的代码

 click(tree: TreeModel) {
    this.arrayData = [];
    let result: any = {};
    let rs = [];
    console.log(tree.selectedLeafNodeIds);


    Object.keys(tree.selectedLeafNodeIds).forEach(x => {

      let node: TreeNode = tree.getNodeById(x);
      // console.log(node);

      if (node.isSelected) {
        if (node.parent.data.name) //if the node has parent
        {
          rs.push(node.parent.data.name + '.' + node.data.name);
          if (!result[node.parent.data.name]) //If the parent is not in the object
            result[node.parent.data.name] = {} //create
          result[node.parent.data.name][node.data.name] = true;
        }
        else {
          if (!result[node.data.name]) //If the node is not in the object
            result[node.data.name] = {} //create
          rs.push(node.data.name);
        }

      }
    })
    this.arrayData = rs;
    tree.selectedLeafNodeIds = {};
  }
  selectAllNodes() {
    this.treeComp.treeModel.doForAll((node: TreeNode) => node.setIsSelected(true));
    //  firstNode.setIsSelected(true);
  }
  onTreeLoad(){
    console.log('tree');
  }

  feedData() {
    const results = Object.keys(this.data.info).map(k => ({
      name: k,
      children: this.data.info[k].properties
        ? Object.keys(this.data.info[k].properties).map(kk => ({ name: kk }))
        : []
    }));
    this.nodes = results;


  }
  feedAnother() {

    const results = Object.keys(this.dataa.info).map(k => ({
      name: k,
      children: this.dataa.info[k].properties
        ? Object.keys(this.dataa.info[k].properties).map(kk => ({ name: kk }))
        : []
    }));
    this.nodes = results;

  }
  onActivate(event) {
    this.selectedDataList.push(event.node.data);
    console.log(this.selectedDataList)
  }
  onDeactivate(event) {
    const index = this.selectedDataList.indexOf(event.node.data);
    this.selectedDataList.splice(index, 1);
    console.log(this.selectedDataList)
  }

下面是我的堆栈闪电战 https://stackblitz.com/edit/angular-hrbppy

Answer 1

使用 updatedata 和初始化事件更新树视图以选中所有复选框。

app.component.html

<tree-root #tree *ngIf ="nodes" [nodes]="nodes" [options]="options" [focused]="true"
    (initialized)="onTreeLoad()"
    (updateData)="updateData()"
    (select)="onActivate($event)"
    (deselect)="onDeactivate($event)">
</tree-root>

仅当变量可用时nodes它才会启动tree-root组件，然后在initialized和updateData事件调用selectAllNodes方法以选中所有复选框。

app.component.ts

updateData() {
  this.selectAllNodes();
}
onTreeLoad(){
  this.selectAllNodes();
}

有关工作示例，请参阅此松弛闪电战。

Answer 2

只是，在你的函数馈送数据调用你的函数this.selectAllNodes((包含在setTimeout中。你可以看到你的分叉堆栈闪电战

setTimeout(()=>{
   this.selectAllNodes()
})

注意：我在您的代码中看到您尝试以不同的方式控制所选项目。我使用递归函数进行了简化。

在这个.treeComp.treeModel.selectedLeafNodeIds中，我们有被更改的项目，所以

  getAllChecked()
  {
    const itemsChecked=this.getData(
              this.treeComp.treeModel.selectedLeafNodeIds,null)
    console.log(itemsChecked);
  }
  getData(nodesChanged,nodes) {
    nodes=nodes||this.treeComp.treeModel.nodes
    let data: any[] = []
      nodes.forEach((node: any) => {
        //in nodesChanged we has object like {1200002:true,123132321:false...}
        if (nodesChanged[node.id]) //can be not changed, and then it's null because
                           //it's not in object or can be changed to false
          data.push({id:node.id,name:node.name})
          //or data.push(node.name); //if only need the "name"
          if (node.children)
              data=[...data,...this.getData(nodesChanged,node.children)]
      }
      );
    return data
  }

更新

后，我更新了函数 getData 以包含节点的"父级"，但查看 @Raghul selvam 的代码，他的函数比我的函数更像我。

getData(nodesChanged,nodes,prefix) {
    nodes=nodes||this.treeComp.treeModel.nodes
    let data: any[] = []
      nodes.forEach((node: any) => {
        if (nodesChanged[node.id])
          data.push(prefix?prefix+"."+node.name:node.name)
          if (node.children)
              data=[...data,...this.getData(nodesChanged,node.children,prefix?prefix+"."+node.name:node.name)]
      }
      );
    return data
  }

并称其为

this.getData(this.treeComp.treeModel.selectedLeafNodeIds,null,"")

Answer 3

你可以在onTreeLoad函数中添加它。您可以添加一个布尔标志(treeLoaded(来跟踪树是否已加载。

onTreeLoad(tree){
   this.selectAllNodes();
    this.treeLoaded = true;
  }