在 Typescript 中将一个对象映射到另一个对象
Map an object to another in Typescript
我有一个角色对象,我想使用 PrimeNG 将其映射到 TreeNode 对象以在树中显示它。
角色对象是这样的(图中也有)
role: [
id: ....
name: ....
description: ....
roles[]: .....
]
树节点对象的结构如下:
{
"data":
[
{
"label": "Documents",
"data": "Documents Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{
"label": "Work",
"data": "Work Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{"label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document"}, {"label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document"}]
},
{
"label": "Home",
"data": "Home Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{"label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month"}]
}]
},
{
"label": "Pictures",
"data": "Pictures Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [
{"label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo"},
{"label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo"},
{"label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo"}]
},
{
"label": "Movies",
"data": "Movies Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{
"label": "Al Pacino",
"data": "Pacino Movies",
"children": [{"label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie"}, {"label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie"}]
},
{
"label": "Robert De Niro",
"data": "De Niro Movies",
"children": [{"label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie"}, {"label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie"}]
}]
}
]
}
data.roles.forEach((role, index) => {
//this.roleTree.label = role.Name;
//this.roleTree.data = role.ID;
let treeNode: TreeNode = {
label: role.Name,
data: role
}
this.treeNodes.push(treeNode);
console.log(role);
console.log(index);
});
但是当我尝试'role'中的'roles'映射到treeNode中的'children'时,这段代码似乎太复杂了。我看过一些像 这样的例子,但它映射的是相同的字段名称。
我是 Typesript 的新手,是否有一种变通方法可以通过指定要映射到 'label' 角色的字段名(例如名称)来将我的角色对象转换为带有子节点的 treeNode?
非常感谢代码示例。
嗯,我不是 100% 确定您使用的 Role
和 TreeNode
类型。这是我根据您问题中的代码做出的猜测。
Role
有一些您关心的属性,但棘手的是 roles
属性,我猜它应该是 [=13= 的数组] 对象:
interface Role {
id: string;
name: string;
description: string;
roles: Role[];
}
同样,TreeNode
也有一些属性,但棘手的是 children
属性,它是 TreeNode
对象的数组。另外,我假设 TreeNode
在 data
类型中是通用的,在这种情况下你想做 TreeNode<Role>
,意思是 data
属性将是一个 Role
对象:
interface TreeNode<T> {
label: string;
data: T;
expandedIcon?: string;
collapsedIcon?: string;
children: TreeNode<T>[];
}
如果这些是正确的,那么你可以使用下面的roleToTreeNode()
函数将一个Role
对象映射到一个TreeNode<Role>
对象:
function roleToTreeNode(role: Role): TreeNode<Role> {
return {
label: role.name,
data: role,
children: role.roles.map(roleToTreeNode)
};
}
children:
行是函数的操作部分:您正在获取 role.roles
数组,并将每个 Role
元素映射到 TreeNode<Role>
,即roleToTreeNode()
函数的作用。也就是说,roleToTreeNode()
是一个调用自身的递归函数。
这有意义吗?希望有所帮助。祝你好运!
我有一个角色对象,我想使用 PrimeNG 将其映射到 TreeNode 对象以在树中显示它。 角色对象是这样的(图中也有)
role: [
id: ....
name: ....
description: ....
roles[]: .....
]
树节点对象的结构如下:
{
"data":
[
{
"label": "Documents",
"data": "Documents Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{
"label": "Work",
"data": "Work Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{"label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document"}, {"label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document"}]
},
{
"label": "Home",
"data": "Home Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{"label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month"}]
}]
},
{
"label": "Pictures",
"data": "Pictures Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [
{"label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo"},
{"label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo"},
{"label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo"}]
},
{
"label": "Movies",
"data": "Movies Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{
"label": "Al Pacino",
"data": "Pacino Movies",
"children": [{"label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie"}, {"label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie"}]
},
{
"label": "Robert De Niro",
"data": "De Niro Movies",
"children": [{"label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie"}, {"label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie"}]
}]
}
]
}
data.roles.forEach((role, index) => {
//this.roleTree.label = role.Name;
//this.roleTree.data = role.ID;
let treeNode: TreeNode = {
label: role.Name,
data: role
}
this.treeNodes.push(treeNode);
console.log(role);
console.log(index);
});
但是当我尝试'role'中的'roles'映射到treeNode中的'children'时,这段代码似乎太复杂了。我看过一些像
我是 Typesript 的新手,是否有一种变通方法可以通过指定要映射到 'label' 角色的字段名(例如名称)来将我的角色对象转换为带有子节点的 treeNode?
非常感谢代码示例。
嗯,我不是 100% 确定您使用的 Role
和 TreeNode
类型。这是我根据您问题中的代码做出的猜测。
Role
有一些您关心的属性,但棘手的是 roles
属性,我猜它应该是 [=13= 的数组] 对象:
interface Role {
id: string;
name: string;
description: string;
roles: Role[];
}
同样,TreeNode
也有一些属性,但棘手的是 children
属性,它是 TreeNode
对象的数组。另外,我假设 TreeNode
在 data
类型中是通用的,在这种情况下你想做 TreeNode<Role>
,意思是 data
属性将是一个 Role
对象:
interface TreeNode<T> {
label: string;
data: T;
expandedIcon?: string;
collapsedIcon?: string;
children: TreeNode<T>[];
}
如果这些是正确的,那么你可以使用下面的roleToTreeNode()
函数将一个Role
对象映射到一个TreeNode<Role>
对象:
function roleToTreeNode(role: Role): TreeNode<Role> {
return {
label: role.name,
data: role,
children: role.roles.map(roleToTreeNode)
};
}
children:
行是函数的操作部分:您正在获取 role.roles
数组,并将每个 Role
元素映射到 TreeNode<Role>
,即roleToTreeNode()
函数的作用。也就是说,roleToTreeNode()
是一个调用自身的递归函数。
这有意义吗?希望有所帮助。祝你好运!