Angular ngOnInit() 属性不会更新值

Question

I have two angular methods which checking roles and permission.If one of these condition true that value assigns to managePermsission boolean property in component. These are two methods in service:

checkProjectManagePermission(): Observable<boolean> {
    const currentLoggedUser = this.authService.getCurrentLoggedInUser();
    const reqUrl = `${currentLoggedUser.mPortalWebApi}${CONST.ctrlUrl.projects}/check-project-manage-permission`;

    return this.http.get(reqUrl).pipe(
        map((response: any) => response),
        catchError((error) => _throw(error)),
    );
}

checkProjectUserRoles(): Observable<boolean> {
    const currentLoggedUser = this.authService.getCurrentLoggedInUser();
    const reqUrl = `${currentLoggedUser.mPortalWebApi}${CONST.ctrlUrl.projects}/${this.projectId}/check-project-user-roles`;

    return this.http.get(reqUrl).pipe(
        map((response: any) => response),
        catchError((error) => _throw(error)),
    );
}

and this is code in component. I want to set property projectManagePermssions on true if some of this mehod return true, but second method set projectManagePermssions to false always altough service response return true value.

projectManagePermissions = false;

 ngOnInit() {       
    this.showLoader = true;
   
    this.checkProjectManagePermission();       
  
   if (!this.projectManagePermissions)         
      this.checkProjectUserRoles();                                 
}

private checkProjectManagePermission() {
    this.projectManagementService.checkProjectManagePermission()
        .pipe(takeUntil(this.observablesDispose$))
        .subscribe(
            (response) => {              
                this.projectManagePermissions = response                    
            }
        )
}

private checkProjectUserRoles() {
    return this.projectManagementService.checkProjectUserRoles()
        .pipe(takeUntil(this.observablesDispose$))
        .subscribe(
            (response) => {                  
                this.projectManagePermissions = response                
            }
        )
}

What I missed here in code ? Thanks in advance !

Answer 1

try this.

projectManagePermissions = false;
    
     ngOnInit() {       
        this.showLoader = true;
        this.checkProjectManagePermission();                                       
    }
    
    private checkProjectManagePermission() {
        this.projectManagementService.checkProjectManagePermission()
            .pipe(takeUntil(this.observablesDispose$))
            .subscribe(
                (response) => {              
                    this.projectManagePermissions = response;
                    if (!this.projectManagePermissions)  {       
                            this.checkProjectUserRoles();  
                    }                    
                }
            )
    }
    
    private checkProjectUserRoles() {
        return this.projectManagementService.checkProjectUserRoles()
            .pipe(takeUntil(this.observablesDispose$))
            .subscribe(
                (response) => {                  
                    this.projectManagePermissions = response                
                }
            )
    }

Answer 2

This is an async issue. ngInit completes before checkProjectManagePermission() does. Subscribe to checkProjectManagePermission() inside ngOnInit.

To ensure you don't get a memory leak, assign checkProjectManagePermission() to a variable, and then call unsubscribe on it inside ngOnDestroy.