我想遍历一个数组，检查节点是否有较低的节点以及节点是否与用户的 Angular 色兼容。
我想我可能会使用“for (let entry of someArray)”来获取数组中节点的每个值，但是“someArray”是函数的返回值:
public menuList(): any {
return [
// SCHEDULER
{
route: ["", "scheduler"],
name: "scheduler",
moduleId: PLATFORM.moduleName("../components/scheduler/scheduler"),
title: "scheduler",
nav: true,
settings: {
icon: "user",
roles: ["Employee", "Admin"],
pos: "left"
}
},
// CLIENTS
{
route: "clients",
name: "clients",
moduleId: PLATFORM.moduleName("../components/clients/clientList/clientList"),
title: "Clients",
nav: true,
settings: {
icon: "user",
roles: ["Employee", "Admin"],
pos: "left",
nav: [
{
route: "clients/ClientsList",
name: "clientList",
moduleId: PLATFORM.moduleName("../components/clients/clientList/clientList"),
href: "#clients/clientsList",
title: "Client List",
settings: {
icon: "list",
roles: ["Employee", "Admin"],
}
},
{
settings: {
roles: ["Employee", "Admin"],
divider: true,
}
},
{
route: "clients/create",
name: "newClient",
moduleId: PLATFORM.moduleName("../components/clients/newClient/newClient"),
href: "#clients/Create",
title: "Create Client",
settings: {
icon: "user",
roles: ["Employee", "Admin"],
}
}
]
}
},
// JOBS
{
route: "jobs",
name: "jobs",
moduleId: PLATFORM.moduleName("../components/jobs/jobsList"),
title: "Jobs",
nav: true,
settings: {
icon: "list",
roles: ["Employee", "Admin"],
pos: "left"
},
},
// ACCOUNTING
// Accounting - 1st level route WITH SUBROUTES
{
route: "accounting",
name: "accounting",
moduleId: PLATFORM.moduleName("../components/accounting/ledgerEnquiry/ledgerEnquiry"),
title: "Accounting",
nav: true,
settings: {
icon: "usd",
roles: ["Employee", "Admin"],
pos: "left",
nav: [
{
title: "Creditor Cost Invoices",
icon: "tasks",
nav: true,
roles: ["Employee", "Admin"],
settings: {
nav: [
{
title: 'Creditor Payments',
icon: 'usd',
roles: ["Employee", "Admin"],
settings: {
nav: [
{
route: "accounting/creditorCostInvoices/payments/paymentsRegister",
name: "paymentsRegister",
moduleId: PLATFORM.moduleName("../components/accounting/creditorCostInvoices/payments/paymentsRegister/paymentsRegister"),
href: '#accounting/creditorCostInvoices/payments/paymentsRegister',
title: 'Payments Register',
settings: {
icon: 'list',
roles: ["Employee", "Admin"]
}
},
{
settings: {
roles: ["Employee", "Admin"],
divider: true,
}
},
{
route: "accounting/creditorCostInvoices/payments/creditorPromptPayments",
name: "promptPayments",
moduleId: PLATFORM.moduleName("../components/accounting/creditorCostInvoices/payments/creditorPromptPayments/creditorPromptPayments"),
href: '#accounting/creditorCostInvoices/payments/creditorPromptPayments',
title: 'Creditor Prompt Payments',
settings: {
icon: 'usd',
roles: ["Employee", "Admin"]
}
},
{
route: "accounting/creditorCostInvoices/payments/payOutstandingCreditorInvoices",
name: "payments",
moduleId: PLATFORM.moduleName("../components/accounting/creditorCostInvoices/payments/payOutstandingCreditorInvoices/payOutstandingCreditorInvoices"),
href: '#accounting/creditorCostInvoices/payments/payOutstandingCreditorInvoices',
title: 'Pay Outstanding Creditor Invoices',
settings: {
icon: 'edit',
roles: ["Employee"/*, "Admin"*/]
}
},
],
}
},
]
}
},
]
}
}
]
}
调度器是一个节点，客户端是另一个节点，但客户端有一个包含三个节点的数组。
我想遍历它并创建一个新数组，如果任何节点不满足 Angular 色值，那么该节点将被排除在外，同时仍保持原始数组的深度结构。所以在 menuList()如果迭代此检查 Angular 色设置是否具有“Admin”并且它不会忽略该节点并且我得到一个过滤数组，其中仅包含其中具有“Admin”的那些节点。
我做了一个带有嵌套“for 循环”的怪物“for 循环”来尝试捕捉这个但失败了。
我现在想我会使用 let entry of someArray 但我收到错误:
Error TS2349 (TS) Cannot invoke an expression whose type lacks a call signature. Type 'any[]' has no compatible call signatures
但不确定如何解决这个问题......
有没有一种聪明的方法可以根据 role.includes("Admin") 等过滤这个数组，同时仍然保持结构？
更新
虽然我认为会有很多更好更简洁的方法，但我终于设法让它发挥作用。
我采取了在移动到下一个节点之前完全处理每个节点的观点，为此我使用了一个递归函数，为每个级别调用自身。
public userMenu(userName: string, userRole: string): any {
let finishedRoleCheckedMenu = Array();
let userMenuElements = Array();
let returnedElement = {} as any;
for (const key in this.menuList()) {
returnedElement = this.processElement(this.menuList()[key], userRole);
if (returnedElement !== 'undefined') {
userMenuElements.push(returnedElement);
}
}
for (let count = 0; count < this.routeMenuItems.length; count++) {
if (!this.routeMenuItems[count].settings.divider) {
userMenuElements.push(this.routeMenuItems[count]);
}
}
return userMenuElements;
}
processElement(element: any, userRole: string) {
let testedElement = {} as any;
let settingsElement = {} as any;
let navElements = Array();
let navElement = {} as any;
if (element.settings.roles.includes(userRole)) {
for (const key in element) {
if (key === "settings") {
for (const settingsKey in element[key]) {
if (settingsKey === "nav") {
for (const navKey in element[key][settingsKey]) {
navElement = this.processElement(element[key][settingsKey][navKey], userRole); // recursive call.
if (navElement !== 'undefined') {
if (navElement.route) { // Collect only those elements with routes.
this.routeMenuItems.push(navElement); // For adding the total routes at the end.
}
navElements.push(navElement);
}
}
if (navElements.length > 0) {
settingsElement[settingsKey] = navElements;
}
} else {
settingsElement[settingsKey] = element[key][settingsKey];
}
}
testedElement[key] = settingsElement;
} else {
testedElement[key] = element[key];
}
}
return testedElement;
} else {
return 'undefined';
}
}
最佳答案
编译器提示调用者代码。特别是它计划对返回的数组执行的操作。这是因为您已将返回类型指定为“any”。也许数组的返回类型可能更合适。
就过滤数组而言，我认为您走在正确的轨道上，但是您可以通过使用映射或映射/归约模式稍微清理一下代码。
关于javascript - typescript -我在使用函数的返回值时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47965735/