使用AsyncPipe获取Observable<Record<string, boolean>&gt的值。

Question

我有一个服务，它以记录的形式返回登录用户的权限。在我的ts文件中，所需的observable被定义为成员变量。

permissionsRecord$: Observable<Record<string, boolean>>;

当调用该服务时，我传递了一个要检查的授权数组。在这个例子中，我只检查 "updateInterval "这个权限。

constructor() {
    this.permissionsRecord$ = this.japs.userHasPermissionForActions([root.scheduler.order.updateInterval]);
  }

从服务中返回的记录以要检查的授权为键。这个值显然可以是true或false.现在我想从我的模板文件中像这样访问记录。

<app-scheduler [allowDragAndDrop]="(permissionsRecord$ | async)[root.scheduler.order.updateInterval]">

事实上，它工作得很好，但我在控制台看到一个错误。

SchedulerComponent.html:4 ERROR TypeError: Cannot read property 'scheduler.order.updateInterval' of null
    at Object.eval [as updateDirectives] (SchedulerComponent.html:13)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258)
    at checkAndUpdateView (core.js:44270)
    at callViewAction (core.js:44636)
    at execComponentViewsAction (core.js:44564)
    at checkAndUpdateView (core.js:44277)
    at callViewAction (core.js:44636)
    at execEmbeddedViewsAction (core.js:44593)
    at checkAndUpdateView (core.js:44271)
    at callViewAction (core.js:44636)

我不确定我的代码是否正确。我怎样才能在模板中使用async正确地访问观察到的 "内部 "记录？

Answer 1

如果输出没有问题，你可以尝试使用safeelvis操作符。? 如是。

<app-scheduler [allowDragAndDrop]="(permissionsRecord$ | async).root?.scheduler.order.updateInterval">

Answer 2

试试

<app-scheduler [allowDragAndDrop]="(permissionsRecord$ | async)?.root.scheduler.order.updateInterval">