[英]Angular nested array filtering based on another array (Navigation menu)
我有一個導航菜單 + 用戶角色列表。 它實際上是一個遺留應用程序,這就是為什么我有這么多用戶角色。
基本上,我想根據用戶擁有的角色顯示導航菜單。
下面給出了用戶角色數組和導航項數組。
基本上,我想通過將導航項數組與用戶角色進行比較來減少它。
用戶角色數組:
[ABS,ADM,AUTH,BAGGED,BLQ3E,MUMA12,MUMA13,MUMA14,MUMP12,MUMP13,MUMP14,MUMADM,MANAGER,SAF_ADM,XXXDDD,CRYPTRESP,SCHEDULEADM,INTERNALUSER,INTERNALMANAGER,GROUPHEAD,USER]
導航項數組
export interface NavItem {
displayName: string;
disabled?: boolean;
iconName: string;
route?: string;
children?: Array<NavItem>;
role: string[];
}
navItems: Array<NavItem> = [
{
displayName: 'Accounts',
iconName: 'account_circle',
route: 'dummyroute',
role: ['USER'],
children: [
{
displayName: 'My Account',
iconName: 'group',
route: 'devfestfl/speakers',
role: ['USER'],
},
{
displayName: 'Change My Password',
iconName: 'password',
route: 'devfestfl/sessions',
role: ['USER'],
},
{
displayName: 'Manage Other Accounts',
iconName: 'manage_accounts',
route: 'devfestfl/feedback',
role: ['ADM'],
},
{
displayName: 'XXXX Accounts',
iconName: 'account_tree',
route: 'devfestfl/feedback',
role: ['ADM'],
},
{
displayName: 'XXXX',
iconName: 'account_tree',
route: 'dummyroute',
role: ['ADM', 'SAF_ADM']
}
]
},
{
displayName: 'First Menu Item',
iconName: 'dock',
route: 'dummyroute',
role: ['CRYPTRESP', 'SCHEDULEADM', 'BLSTAFF', 'ADM', 'CRG_USER', 'USER'],
children: [
{
displayName: 'XX Menu Item',
iconName: '',
route: 'dummy',
role: ['USER'],
},
{
displayName: 'YY Menu Item',
iconName: '',
route: 'dummy',
role: ['ADM'],
},
{
displayName: 'ZZ Menu Item',
iconName: '',
route: 'dummy',
role: ['ADM', 'CRYPTRESP', 'SCHEDULEADM'],
}
{
displayName: 'PP Management',
iconName: '',
route: 'dummy',
role: ['ADM', 'BAGGED'],
children: [
{
displayName: 'PP Datasets',
iconName: '',
route: 'dummy',
role: ['ADM'],
},
{
displayName: 'PP Groups',
iconName: '',
route: 'dummy',
role: ['BAGGED'],
}
]
},
{
displayName: 'Beamline Schedule',
iconName: '',
route: 'beamlineschedule',
role: ['ADM', 'CRYPTRESP', 'SCHEDULEADM', 'BLSTAFF', 'INTERNALMANAGER'],
children: [
{
displayName: 'Manage Schedule',
iconName: '',
route: 'manageschedule',
role: ['ADM', 'CRYPTRESP', 'SCHEDULEADM', 'BLSTAFF', 'INTERNALMANAGER'],
},
{
displayName: 'Show Finalized Runs',
iconName: '',
route: 'showfinalizedruns',
role: ['ADM', 'CRYPTRESP', 'SCHEDULEADM'],
},
{
displayName: 'Scheduling Bulk Import',
iconName: '',
route: 'schedulingbulkimport',
role: ['ADM', 'CRYPTRESP', 'SCHEDULEADM'],
},
{
displayName: 'Beamline Accounts',
iconName: '',
route: 'beamlineaccounts',
role: ['ADM', 'ABS', 'BLQ3E'],
}
]
},
{
displayName: 'Machine Operation Schedule',
iconName: '',
route: 'machineoperationschedule',
role: ['ADM'],
},
{
displayName: 'End of Shift Forms',
iconName: '',
route: 'feedbackforms',
role: ['ADM'],
},
{
displayName: 'External Funded Proposals',
iconName: '',
route: 'externalfundedproposals',
role: ['ADM'],
children: [
{
displayName: 'Submitted Reports',
iconName: '',
route: 'submittedreports',
role: ['ADM'],
},
{
displayName: 'Pending Reports',
iconName: '',
route: 'pendingreports',
role: ['ADM'],
},
{
displayName: 'iNEXT-Discovery Proposals',
iconName: '',
route: 'inextdproposals',
role: ['ADM'],
}
]
}
],
},
{
displayName: 'Safety',
iconName: 'health_and_safety',
route: 'dummy',
role: ['ADM', 'USER'],
children: [
{
displayName: 'Safety child menu',
iconName: '',
route: 'dummy',
role: ['ADM', 'USER'],
children: [
{
displayName: 'safety grandchild',
iconName: '',
route: 'dummy',
role: ['ADM', 'USER'],
},
{
displayName: 'grandchild2',
iconName: '',
route: 'dummy',
role: ['ADM', 'USER'],
}
]
},
{
displayName: 'safety second child menu',
iconName: '',
route: 'dummy',
role: ['ADM'],
}
]
},
];
我到現在為止所嘗試的都失敗了。 我最接近的是如下。 我很確定我做錯了什么,因為它不起作用。
for (var navitem of this.navItems) {
for (var userrole of this.userRolesArray) {
if (navitem.role.some(item => item.includes(userrole))) {
if (!this.newNavItemsArray.includes(navitem)) {
for (var navchild of navitem.children) {
if (navchild.role.some(item => item.includes(userrole))) {
this.newNavItemsArray.push({ navitem, children: [navchild] })
}
}
}
}
}
}
請幫忙:)
我使用 reduce 和some
方法采取了不同的方法。 我假設如果目標角色不在主導航中,它應該跳過孩子。
navItems.reduce((b, a) => {
if (!a.role.some(r => r === role)) return b;
a.children = a.children.filter(f => f.role.some(r => r === role))
return [...b, a]
}, [])
let navItems = [{ displayName: 'Accounts', iconName: 'account_circle', route: 'dummyroute', role: ['USER'], children: [{ displayName: 'My Account', iconName: 'group', route: 'devfestfl/speakers', role: ['USER'], }, { displayName: 'Change My Password', iconName: 'password', route: 'devfestfl/sessions', role: ['USER'], }, { displayName: 'Manage Other Accounts', iconName: 'manage_accounts', route: 'devfestfl/feedback', role: ['ADM'], }, { displayName: 'XXXX Accounts', iconName: 'account_tree', route: 'devfestfl/feedback', role: ['ADM'], }, { displayName: 'XXXX', iconName: 'account_tree', route: 'dummyroute', role: ['ADM', 'SAF_ADM'] } ] }, { displayName: 'First Menu Item', iconName: 'dock', route: 'dummyroute', role: ['CRYPTRESP', 'SCHEDULEADM', 'BLSTAFF', 'ADM', 'CRG_USER', 'USER'], children: [{ displayName: 'XX Menu Item', iconName: '', route: 'dummy', role: ['USER'], }, { displayName: 'YY Menu Item', iconName: '', route: 'dummy', role: ['ADM'], }, { displayName: 'ZZ Menu Item', iconName: '', route: 'dummy', role: ['ADM', 'CRYPTRESP', 'SCHEDULEADM'], }, { displayName: 'PP Management', iconName: '', route: 'dummy', role: ['ADM', 'BAGGED'], children: [{ displayName: 'PP Datasets', iconName: '', route: 'dummy', role: ['ADM'], }, { displayName: 'PP Groups', iconName: '', route: 'dummy', role: ['BAGGED'], } ] }, { displayName: 'Beamline Schedule', iconName: '', route: 'beamlineschedule', role: ['ADM', 'CRYPTRESP', 'SCHEDULEADM', 'BLSTAFF', 'INTERNALMANAGER'], children: [{ displayName: 'Manage Schedule', iconName: '', route: 'manageschedule', role: ['ADM', 'CRYPTRESP', 'SCHEDULEADM', 'BLSTAFF', 'INTERNALMANAGER'], }, { displayName: 'Show Finalized Runs', iconName: '', route: 'showfinalizedruns', role: ['ADM', 'CRYPTRESP', 'SCHEDULEADM'], }, { displayName: 'Scheduling Bulk Import', iconName: '', route: 'schedulingbulkimport', role: ['ADM', 'CRYPTRESP', 'SCHEDULEADM'], }, { displayName: 'Beamline Accounts', iconName: '', route: 'beamlineaccounts', role: ['ADM', 'ABS', 'BLQ3E'], } ] }, { displayName: 'Machine Operation Schedule', iconName: '', route: 'machineoperationschedule', role: ['ADM'], }, { displayName: 'End of Shift Forms', iconName: '', route: 'feedbackforms', role: ['ADM'], }, { displayName: 'External Funded Proposals', iconName: '', route: 'externalfundedproposals', role: ['ADM'], children: [{ displayName: 'Submitted Reports', iconName: '', route: 'submittedreports', role: ['ADM'], }, { displayName: 'Pending Reports', iconName: '', route: 'pendingreports', role: ['ADM'], }, { displayName: 'iNEXT-Discovery Proposals', iconName: '', route: 'inextdproposals', role: ['ADM'], } ] } ], }, { displayName: 'Safety', iconName: 'health_and_safety', route: 'dummy', role: ['ADM', 'USER'], children: [{ displayName: 'Safety child menu', iconName: '', route: 'dummy', role: ['ADM', 'USER'], children: [{ displayName: 'safety grandchild', iconName: '', route: 'dummy', role: ['ADM', 'USER'], }, { displayName: 'grandchild2', iconName: '', route: 'dummy', role: ['ADM', 'USER'], } ] }, { displayName: 'safety second child menu', iconName: '', route: 'dummy', role: ['ADM'], } ] }, ]; const getNavForRole = (role) => { return navItems.reduce((b, a) => { if (.a.role;some(r => r === role)) return bachildren = a.children.filter(f => f.role.some(r => r === role)) return [..,b, a] }. []) } console.log(getNavForRole('CRYPTRESP')) console.log('------') console.log(getNavForRole('USER'))
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.