Angular 6 : async await some variable got it variable

Question

Under my Angular 6 app, I have a variable "permittedPefs" which is getting value after an HTTP call (asynchronous)

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

in another method, I'm using that same variable:permittedPefs

But as it's initially empty and it gots its value after such a time, so I need to wait for it to re-use it.

I've tried to use async-await, and my purpose is waiting for permittedPefs to got aobject value

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

how to fix it ??

instead of subscribing to `getUserRolePefs()` just return the `Observable`. Then in your other method, you can subscribe to `permittedPefs` and continue working. — Agash Thamo., Aug 16 '18 at 12:44
[Don't do asynchronous stuff in your constructor!](https://stackoverflow.com/a/24686979/1048572) — Bergi, Aug 16 '18 at 13:33

score 0 · Answer 1 · answered Aug 16 '18 at 12:57

Use a behaviorSubject

  @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 where ever you are checking for it(remember to unsubscribe when you are done)

if it has to be async you can do it like below

  async checkPefPresence(pefId): Promise {
    return new Promise((resolve, reject) => {
      this.featuresLoadPermissionsService.permittedPefs.subscribe(listPefs  => {
          //handle whatever check you want to do here 
          resolve();
      },reject);
    })

score 0 · Accepted Answer · answered Aug 16 '18 at 14:14

As loadUserPefsService.getUserRolePefs method returns Observable you can store it and subscribe to it later when you need it.

 @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);
         });
 }

Angular 6 : async await some variable got it variable

2 Answers2