Angular ngrx：在模板中呈现 object 的问题

Question

我有一个以这种方式声明的 Typescript 接口：

export interface FolderList {
 ADMIN: [Folder[], string, string];
 SUPERADMIN: [Folder[], string, string];
 USER: [Folder[], string, string];
}

文件夹以这种方式声明：

export interface Folder {
  idFolder: number;
  folderName: string;
}

我想要一个 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"],
}

我以这种方式在我的组件中声明了一个属性：

export class SidebarContainer implements OnInit {
  folder$: Observable<FolderList>;
}

这是我以这种方式在一个 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});
    }));
  })
);
});

其中关键的“角色”指的是ADMIN、SUPERADMIN、USER这三个角色。

之后，我使用了一个更新 state 的减速器。

export const sideBarReducer = createReducer(
 initialSidebarState,
 on(SidebarActions.loadFolderSuccess, (state, action): SidebarState => {
   return {
     ...state,
     folders: action.folders
   };
 })
);

现在我正在尝试显示此 object 的模板数据

{{folder$.ADMIN | async }}

但是 visual studio 代码给了我这个错误：

  Identifier 'ADMIN' is not defined. 'Observable<FolderList>' does not 
  contain such a member

但是如果我以这种方式只渲染 folder$

 {{folder$ | async | json }}

我可以看到财产管理员...

怎么了？

Answer 1

folder$被定义为Observable<FolderList>所以它不会包含像ADMIN这样的属性。

但是folder$ | async 由于async pipe ， folder$ | async将包含ADMIN属性。

• Async pipe 订阅该folder$ observable 并返回最新发出的值。 所以folder$ | async folder$ | async将具有FolderList的值。

因此，要显示ADMIN属性，需要从FolderList订阅 object 显示如下。

{{ (folder$ | async)?.ADMIN }}