Angular Material 树形复选框实例

Question

我已经看过了关于如何使用Angular Material树形复选框组件的几乎所有示例，例如官方示例和这个。
这些示例向我们展示了一个字符串数组结构作为数据绑定。但是，我们如何将嵌套的复杂对象数组转换为此组件呢？

我的数据结构：

正如您所看到的，数据告诉客户端哪些复选框项目必须被设置为打勾状态，并且“Id”必须绑定到树上。

当我用官方示例“TREE-DATA”替换我的“TREE-DATA”时，我看到以下结果。
我想我们需要更改官方示例中的“buildFileTree（）”或“transformer（）”方法。

Angular（7.0.0），Angular Material（6.4.7）

- KoKo

Answer 1

最终我解决了这个问题，并在这个地方写了一个示例。

问题是如何解决的？
我对'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;  }

- KoKo

---

我试了一下，一开始完美地运行了。然而，当我需要默认预选某些复选框时，遇到了问题。在用户尝试更新这些字段时，我希望显示之前选择的值作为选中的复选框。我尝试了一些方法，但没有找到解决办法。 - undefined