Within my Typescript interface, I have declared the following structure:
export interface FolderList {
ADMIN: [Folder[], string, string];
SUPERADMIN: [Folder[], string, string];
USER: [Folder[], string, string];
}
The 'Folder' interface is defined as follows:
export interface Folder {
idFolder: number;
folderName: string;
}
My goal is to have an object containing three arrays:
FolderList: {
ADMIN: [[{idFolder: '1', folderName: 'AdminFolder'}], "2 pages", "number 3"],
SUPERADMIN: [[{idFolder: '1', folderName: 'SuperadminFolder'}], "2 pages", "number 3"],
USER: [[{idFolder: '1', folderName: 'UserFolder'}], "2 pages", "number 3"],
}
I have declared an attribute in my component like this:
export class SidebarContainer implements OnInit {
folder$: Observable<FolderList>;
}
This observable is managed within an NGRX effect in the following manner:
loadFolder$ = createEffect(() =>{
return this.action$.pipe(
ofType(SidebarAction.loadFirmSuccess),
switchMap(action => {
const foldersList = {};
action.firms.map(
firm => {
firm.roles.map((role: string) => {
foldersList[role] = this.sidebarService.getFolders(action.userId, firm.id.toString() , role, '0', '3');
});
}
);
return forkJoin(foldersList).pipe(map(folders => {
return SidebarAction.loadFolderSuccess({folders});
}));
})
);
});
The 'role' key corresponds to the roles ADMIN, SUPERADMIN, and USER.
I then utilize a reducer to update the state accordingly:
export const sideBarReducer = createReducer(
initialSidebarState,
on(SidebarActions.loadFolderSuccess, (state, action): SidebarState => {
return {
...state,
folders: action.folders
};
})
);
Currently, I am attempting to display the data from this object within the template:
{{folder$.ADMIN | async }}
However, I encounter an error message stating:
Identifier 'ADMIN' is not defined. 'Observable<FolderList>' does not
contain such a member
Interestingly, if I simply render 'folder$' like this:
{{folder$ | async | json }}
I can indeed see the 'ADMIN' property...
What could be causing this issue?