[英]Angular ngrx: Issue to render object in template
I have a Typescript interface declared in this way:我有一个以这种方式声明的 Typescript 接口:
export interface FolderList {
ADMIN: [Folder[], string, string];
SUPERADMIN: [Folder[], string, string];
USER: [Folder[], string, string];
}
Folder is declared in this way:文件夹以这种方式声明:
export interface Folder {
idFolder: number;
folderName: string;
}
I want an object with three arrays inside:我想要一个 object,里面有三个 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 declared an attribute in my component in this way:我以这种方式在我的组件中声明了一个属性:
export class SidebarContainer implements OnInit {
folder$: Observable<FolderList>;
}
This in an observable that I manage in one NGRX effect in this way:这是我以这种方式在一个 NGRX 效果中管理的可观察对象:
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 key "role" referred to the three roles ADMIN, SUPERADMIN, USER.其中关键的“角色”指的是ADMIN、SUPERADMIN、USER这三个角色。
After that I used a reducer that updates the state.之后,我使用了一个更新 state 的减速器。
export const sideBarReducer = createReducer(
initialSidebarState,
on(SidebarActions.loadFolderSuccess, (state, action): SidebarState => {
return {
...state,
folders: action.folders
};
})
);
Now I'm tryng to display on template datas of this object现在我正在尝试显示此 object 的模板数据
{{folder$.ADMIN | async }}
but visual studio code gives me this error:但是 visual studio 代码给了我这个错误:
Identifier 'ADMIN' is not defined. 'Observable<FolderList>' does not
contain such a member
but if I render only folder$ in this way但是如果我以这种方式只渲染 folder$
{{folder$ | async | json }}
I can see property ADMIN...我可以看到财产管理员...
What's wrong?怎么了?
folder$
is defined as Observable<FolderList>
so it won't contain the property like ADMIN
. folder$
被定义为Observable<FolderList>
所以它不会包含像ADMIN
这样的属性。
But folder$ | async
但是folder$ | async
folder$ | async
will contain ADMIN
property because of async pipe
.由于async pipe
, folder$ | async
将包含ADMIN
属性。
Async
pipe subscribes that folder$
observable and returns the latest emitted value. Async
pipe 订阅该folder$
observable 并返回最新发出的值。 So folder$ | async
所以folder$ | async
folder$ | async
will have value of FolderList
. folder$ | async
将具有FolderList
的值。 So to show ADMIN
property, it is needed to show from FolderList
subscribed object as follows.因此,要显示ADMIN
属性,需要从FolderList
订阅 object 显示如下。
{{ (folder$ | async)?.ADMIN }}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.