Angular 6: Utilizing async/await to access and manipulate specific variables within the application

Question

Angular 6: Utilizing async/await to access and manipulate specific variables within the application

Within my Angular 6 application, I am facing an issue with a variable named "permittedPefs" that is assigned a value after an asynchronous HTTP call.

 @Injectable()
 export class FeaturesLoadPermissionsService {
    permittedPefs = [];
    constructor() {       
       this.loadUserPefsService.getUserRolePefs(roleId)
                               .subscribe(
              (returnedListPefs) => {
                this.permittedPefs = returnedListPefs;
              },
              error => {
                console.log(error);
              });
    }
}

In another function, I am utilizing the same variable: permittedPefs.

However, since it starts off empty and gets populated at a delayed time, I need to wait for it before reusing it.

I attempted implementing async-await, where my objective is to ensure that permittedPefs has obtained an object value:

  async checkPefPresence(pefId) {
    const listPefs = await this.permittedPefs
  }

What steps should be taken to resolve this issue?

javascript angular typescript asynchronous ecmascript-6

Answer 1

Answer №1

Storing the Observable returned by loadUserPefsService.getUserRolePefs method allows you to subscribe to it at a later time for access to user role permissions.

@Injectable()
export class FeaturesLoadPermissionsService {
    permittedPefs = [];
    constructor() {
        this.userRolePefsObservable = this.loadUserPefsService.getUserRolePefs(roleId);
    }
}

checkPefPresence(pefId) {
    let listPefs;
    this.userRolePefsObservable.subscribe(
        (returnedListPefs) => {
            listPefs = returnedListPefs;
        },
        error => {
            console.log(error);
        });
}

Answer 2

Storing the Observable returned by loadUserPefsService.getUserRolePefs method allows you to subscribe to it at a later time for access to user role permissions.

@Injectable()
export class FeaturesLoadPermissionsService {
    permittedPefs = [];
    constructor() {
        this.userRolePefsObservable = this.loadUserPefsService.getUserRolePefs(roleId);
    }
}

checkPefPresence(pefId) {
    let listPefs;
    this.userRolePefsObservable.subscribe(
        (returnedListPefs) => {
            listPefs = returnedListPefs;
        },
        error => {
            console.log(error);
        });
}

Answer 3

Answer №2

Utilize a behaviorSubject for managing permissions

  @Injectable()
    export class FeaturesLoadPermissionsService {

      permittedPefs: BehaviorSubject<any[]> = new BehaviorSubject([]);

      constructor() {
        this.loadUserPefsService.getUserRolePefs(roleId)
          .subscribe((returnedListPefs) => {
            this.permittedPefs.next(returnedListPefs);
          },
            error => {
              console.log(error);
            });
      }
    }

Then wherever you need to check for it (remember to unsubscribe when finished)

If it needs to be asynchronous, you can handle it like the example below

  async checkPefPresence(pefId): Promise {
    return new Promise((resolve, reject) => {
      this.featuresLoadPermissionsService.permittedPefs.subscribe(listPefs  => {
          //handle any necessary checks here 
          resolve();
      },reject);
    })

Answer 4

Utilize a behaviorSubject for managing permissions

  @Injectable()
    export class FeaturesLoadPermissionsService {

      permittedPefs: BehaviorSubject<any[]> = new BehaviorSubject([]);

      constructor() {
        this.loadUserPefsService.getUserRolePefs(roleId)
          .subscribe((returnedListPefs) => {
            this.permittedPefs.next(returnedListPefs);
          },
            error => {
              console.log(error);
            });
      }
    }

Then wherever you need to check for it (remember to unsubscribe when finished)

If it needs to be asynchronous, you can handle it like the example below

  async checkPefPresence(pefId): Promise {
    return new Promise((resolve, reject) => {
      this.featuresLoadPermissionsService.permittedPefs.subscribe(listPefs  => {
          //handle any necessary checks here 
          resolve();
      },reject);
    })

Angular 6: Utilizing async/await to access and manipulate specific variables within the application

Answer №1

Answer №2

Similar questions

What could be causing the issue with my validation for alphabetical input?

Using Symbol.iterator in Typescript: A step-by-step guide

Implementing auto-complete functionality for a text box in an MVC application using jQuery

What is the best way to display only a specific container from a page within an IFRAME?

Divergence in results: discrepancy found in the outputs of nodejs crypto module and tweetnacl.js

The Vue property I customized in my component is not being recognized by VSCode(Vetur)

Exploring Angular 2's @Input and @Output Directives

Ways to verify the nodemon version that is currently installed on your local machine

Exploration of frontend utilization of web API resources

Having trouble displaying the Primevue dialog modal in Vue 3?

Having trouble connecting to the Brewery API, could use some guidance from the experts (Novice)

When passing an invalid value to the Props in TypeScript, no errors are being thrown

jQuery: event not firing for dynamically loaded elements via AJAX

Exploring the power of AngularJS in manipulating Google Maps polygons with the help of ng-repeat

Transfer the controller of the parent directive to a directive controller, similar to how it is executed in the "link" function

Trouble transferring $rootScope.currentUser between AngularJS profile and settings page

Determine the generic types of callback in TypeScript based on the argument provided

Preventing dragging in Vis.js nodes after a double click: a definitive guide

Transitioning from using a jQuery get request to utilizing Vue.js

How to remove the border of the MUI Select Component in React JS after it has been clicked on