我看到了几乎所有关于如何使用 Angular Material 树复选框的示例,例如 official example和 this .
在这个例子中使用了字符串数组结构。但是如何将真正的嵌套对象数组结构转换为 Angular Material 树复选框?
我的结构:
当您看到从服务器接收到的数据时,告诉客户端哪个项目的复选框值为真。并且“Id”必须绑定(bind)到树,因为我在用户提交表单时将此字段发送到服务器。
这个结构正确吗?以及如何映射到 Angular Material 树方格框。
我想必须更改 official example 中的“buildFileTree()”或“transformer()”方法.因为当我用官方示例“TREE-DATA”替换我的“TREE-DATA”时;然后我看到跟随树作为结果。
Angular 版本(7.0.0) Angular Material 版本(6.4.7)
最佳答案
最后我解决了这个问题,我在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 树复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63750852/