Angular material 带有实例的树形复选框

Question

我看到了几乎所有关于如何使用 angular material 树复选框的示例，例如 official example and this。
在这个例子中使用了字符串数组结构。但是如何将真正的嵌套对象数组结构转换为 angular material 树复选框？
我的结构：

当您看到从服务器接收到的数据时，告诉客户端哪个项目的复选框值为真。 'Id' 必须绑定到树，因为我在用户提交表单时将此字段发送到服务器。
这个结构正确吗？以及如何映射到 angular material tree chechbox。
我想必须更改 official example 中的 'buildFileTree()' 或 'transformer()' 方法。因为当我用官方示例 'TREE-DATA' 替换我的 'TREE-DATA' 时；然后我看到跟随树作为结果。

Angular版本(7.0.0)Angular Material版本(6.4.7)

Answer 1

最后我解决了这个问题，我在this place

中写了一个示例

如何解决？
如我所料；我必须在 'buildFileTree()' 和 '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 带有实例的树形复选框

Angular material tree checkbox with real example

checkbox

tree

checkboxtree

angular-material

angular