Angular material tree checkbox with real example

Question

I saw almost all examples about how to work with angular material tree checkbox such as official example and this.
In this examples used string array structure. but how can I transform a real nested object array structure to angular material tree checkbox?
My structure:

As you see the data that received from the server, say to the client that which item checkbox value is true. and 'Id' must be bind to the tree because of I send this field to the server when user submit the form.
This structure is correct? and how can I mapping to angular material tree chechbox.
I guess must be change the 'buildFileTree()' or 'transformer()' methods in official example. because when I replace my 'TREE-DATA' with official example 'TREE-DATA'; then I see the follow tree as result.

Angular version(7.0.0) Angular Material Version(6.4.7)

KoKo KoKo · Accepted Answer · 2020-09-05T09:40:53

Finally I solved this problem and I wrote a sample in this place

How to solved?
As I guessed; I must be wrote some changes in 'buildFileTree()' and 'transformer()'.

buildFileTree(obj: {[key: string]: any}, level: number): TodoItemNode[] {
return Object.keys(obj).reduce<TodoItemNode[]>((accumulator, key) => {
  const item = obj[key];
  const node = new TodoItemNode();
  node.label = obj[key].name;
  node.id = obj[key].id;
  node.isChecked=  obj[key].isChecked;
  node.claimId=  obj[key].claimId;
  node.isPlanType=  obj[key].isPlanType;

  if (item != null) {
    if (typeof item === 'object'  && item.children!= undefined) { 


      node.children = this.buildFileTree(item.children, level + 1);
    } else {
      node.label = item.name;
    }
  }

  return accumulator.concat(node);
}, []);}

  transformer = (node: TodoItemNode, level: number) => {
const existingNode = this.nestedNodeMap.get(node);
const flatNode = existingNode && existingNode.label === node.label
    ? existingNode
    : new TodoItemFlatNode();
flatNode.label = node.label;
flatNode.level = level;
flatNode.id=node.id;
 flatNode.isChecked = node.isChecked;
 flatNode.claimId = node.claimId;
 flatNode.isPlanType = node.isPlanType;
flatNode.expandable = !!node.children;
this.flatNodeMap.set(flatNode, node);
this.nestedNodeMap.set(node, flatNode);
return flatNode;  }

Angular material tree checkbox with real example

1 Answers