How to Retrieve Observable<Record<string, boolean>> Value with the Help of AsyncPipe

My service retrieves permissions for the currently logged-in user as a record. The necessary observable is declared in my TypeScript file as a member variable: 

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

When I call the service, I send an array of authorizations to be checked. In this scenario, I am checking only for the "updateInterval" permission:

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

The record returned by the service has the authorization as the key to be checked. The value can either be true or false. I intend to access this record from my template file like so:

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

Although it seems to be functioning correctly, I am seeing an error in the console.

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)

I am unsure if my code is accurate. How can I properly access the record within the observable using async from the template?

angulartypescriptangular2-observablesasync-pipe

Answer №1

To determine if the result is satisfactory, consider implementing the secure/elvis operator ? in this manner:

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

Answer №2

attempting

<app-planner [enableDragAndDrop]="(permissionData$ | async)?.root.planner.task.modifyFrequency">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to access the value or key of a JSON property in an Angular template for rendering purposes?

Having trouble displaying the JSON values of certain properties on screen. Utilizing Angular Material table to showcase my JSON response. The code snippet below is responsible for rendering the JSON data: <mat-card-content class="dashboard-card-cont ...

angulartypescriptangular-material

Avoiding caching of GET requests in Angular 2 for Internet Explorer 11

My rest endpoint successfully returns a list when calling GET, and I can also use POST to add new items or DELETE to remove them. This functionality is working perfectly in Firefox and Chrome, with the additional note that POST and DELETE also work in IE ...

javascriptangulartypescriptinternet-explorer-11http-caching

Is there a compatibility issue between Nativescript and Angular Universal?

I am fairly new to Nativescript and recently attempted to incorporate Angular Universal building into an existing Angular 9/Nativescript application. However, I encountered the following error: [error] Error: Schematic "universal" not found in collect ...

angularnativescriptangular-universal

What is the predefined value for a multi-select generated by the ng-for directive in Angular?

I am having trouble setting default selected values for the multi-select. Despite trying various methods such as initializing the ngModel to bind the variable and using [selected] = "selectedSegment == 'S1'", none of them seem to be effective fo ...

javascripthtmlangularangular8

Limit the selection of 'pickable' attributes following selections in the picking function (TypeScript)

In the codebase I'm working on, I recently added a useful util function: const pick = <T extends object, P extends keyof T, R = Pick<T,P>>( obj: T, keys: P[] ): R => { if (!obj) return {} as R return keys.reduce((acc, key) => { re ...

javascripttypescriptfunction

Is it necessary to verify the apiKey or does the authentication of the user suffice for an HTTPS callable function?

I'm interested in creating a cloud function that can be executed from both the client and the backend. After exploring the documentation, I learned that an HTTPS callable function will automatically include user authentication data, accessible through ...

typescriptfirebasegoogle-cloud-platformgoogle-cloud-firestoregoogle-cloud-functions

Load a React component in the same spot when clicked

Is there a way to implement a functionality where clicking on different buttons in a panel will display different components in the same location? <AddNotification /> <EditNotification /> <DeleteNotification /> const AdminPanel = () =& ...

reactjstypescript

A specialized type that guarantees a string union includes a particular string literal

I need to define a Mapped type that specifies a field named status which can be either a string or the string value ready: This example works as expected: export type ValidServiceState = HasReady<{ status: "ready" }>; The following should ...

typescript

Troubleshooting: Why is my Datatables data not showing up with Angular 2/4 server side processing

Angular version 4.2.4 Angular-Datatables version 4.2.0 HTML Code Snippet <table datatable [dtOptions]="dtOptions"></table> Component Function ngOnInit() { this.dtOptions = { ajax: { url: "http://localhost:8880/nmets ...

angulardatatablesangular-datatables

Encountering error code 128 while attempting to download npm packages

After attempting to install jspdf using the command npm install jspdf --save, I encountered the following error: npm ERR! code 128 npm ERR! Command failed: git submodule update -q --init --recursive npm ERR! error: waitpid for git-submodule failed: No chi ...

angularnpmnpm-install

Acquire Superheroes in Journey of Champions from a REST endpoint using Angular 2

Upon completing the Angular 2 Tour of heroes tutorial, I found myself pondering how to "retrieve the heroes" using a REST API. If my API is hosted at http://localhost:7000/heroes and returns a JSON list of "mock-heroes", what steps must I take to ensure a ...

angulartypescriptangular2-httpangular-tour-of-heroes

Unable to simulate a service and retrieve information in an angular unit test - showing as undefined

In my current project, I have a component that I am trying to write unit tests for. However, when I run the test, I noticed that the value of console.log('**fav**' + favorite[`isFavorite`]); shows up as undefined. This indicates that the data I ...

angulartypescript

Convert checkbox choices to strings stored in an array within an object

I have a intricate object structure JSON{ alpha{ array1[ obj1{}, obj2{} ] } } In addition to array1, I need to include another array: array2 that will only consist of strin ...

javascriptarraysangulartypescriptangular8

When attempting to utilize the Next.js Head component in a location other than _document, the page experiences

Currently, I am in the process of integrating Next.js with Typescript and Material UI. Despite the abundance of tutorials available online for setting up Next.js with Material UI, I have encountered a commonality among them where they all provide identical ...

reactjstypescriptmaterial-uinext.js

Having trouble assigning a value of `undefined` to a TextField state in React hook

I am in need of setting the initial state for a TextField date to be undefined until the user makes a selection, and then allowing the user an easy way to reset the date back to undefined. In the code snippet below, the Reset button effectively resets par ...

reactjstypescriptmaterial-uireact-hooksreact-state-management

The Angular material Datepicker is encountering a conflict where multiple custom value accessors are trying to match a form control with an unspecified

Recently, I integrated a material datepicker widget into my Angular (7) application. The HTML code for this implementation is provided below. <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Expiry Date" [formControl]="expi ...

angularangular-materialangular-material-datetimepicker

Mastering Typecasting in TypeScript: A comprehensive guide

I have a loadMore function that retrieves data and returns a Promise of either Project[] or Folder[] or undefined. const items = await loadMore(); How can I specifically cast the type of 'items' to Folder[] in TypeScript? ...

typescript

Show a stylish container when the server encounters an HTTP error with status code 500

My approach for error handling involves a straightforward ErrorHandler class structured like this: export class AppErrorHandler implements ErrorHandler { handleError(error : any){ //console.log('test error ', error.status); ...

htmlangularerror-handling

What is the best way to implement multiple ternary operators within HTML code?

Consider the following code snippet: It currently applies CSS classes up to red4, but I want to apply CSS classes up to red11. Additionally, the variable "size" in myData should be dynamic. For example, size could range from 0-20 // 0-100 // 0-10000, etc., ...

htmlcssangulartypescriptsvg

Pull in class definitions from the index.js file within the node_modules directory

In my project, I have the package called "diagram-js" in the node_modules. The file node_modules/diagram-js/lib/model/index.js contains multiple class definitions as shown below: /** * @namespace djs.model */ /** * @memberOf djs.model */ /** * The b ...

javascripttypescriptnpmnode-modulestypescript-typings