Question

目标：我有一个名为“ feed data”的按钮，因此当我单击它时，数据将被加载，这是指带有复选框的树，我的要求是，当我将其与数据一起单击时，所有复选框都必须检查了我尝试使用的初始化

 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

只是，在您的函数供稿数据调用中，函数set.out中包含了this.selectAllNodes（）。您可以看到自己的forked stackblitz

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

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

在this.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 2

使用updatedata和initialized事件来更新树视图以选中所有复选框。

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>

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

app.component.ts

updateData() {
  this.selectAllNodes();
}

onTreeLoad(){
  this.selectAllNodes();
}

有关工作示例，请参见此slackblitz。

Answer 3

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

onTreeLoad(tree){

   this.selectAllNodes();
    this.treeLoaded = true;
  }

无法使用init上的angular2-tree选择树中的所有复选框

3 个答案: