Angular 错误类型错误：无法读取未定义的属性“用户名”

Question

I'm new to Angular so bear with me.

I wanted to get the username of the current user in my angular 10 application But when I try to load the dashboard, I get the following error. The backend is developed with .net 5 web api.

    ERROR TypeError: Cannot read property 'userName' of undefined
    at ProfileComponent.loadMember (profile.component.ts:29)
    at ProfileComponent.ngOnInit (profile.component.ts:23)
    at callHook (core.js:3038)
    at callHooks (core.js:3008)
    at executeInitAndCheckHooks (core.js:2960)
    at refreshView (core.js:7186)
    at refreshEmbeddedViews (core.js:8279)
    at refreshView (core.js:7195)
    at refreshComponent (core.js:8325)
    at refreshChildComponents (core.js:6964)

Here is My code in the Profile component where i try to fetch the user details

export class ProfileComponent implements OnInit {
    staff!: Staff;
    user!: User;

    constructor(private accountService: AuthenticationService, private staffService: StaffService) {

        this.accountService.currentUser$.pipe(take(1)).subscribe(user => this.user = user);

    }

    ngOnInit(): void {
        this.loadMember();

    }

    loadMember() {

        this.staffService.getStaff(this.user.userName).subscribe(staff => {
            this.staff = staff;
        })
    }

  
}    

my StaffService code here is the code of the get staff service from the api

      getStaff(userName: string) {
        console.log(this.memberCache); 
    const member = [...this.memberCache.values()].reduce((arr, elem) => arr.concat(elem.result), [])
    .find((member: Staff) => member.userName === userName);

    if(member){
      return of(member);
    }
    console.log(member);
    return this.http.get<Staff>(this.baseUrl + 'AppUsers/staffByUserName/' + userName)
  }

I cant understand why it is not working i try to conole out this.user.userName but it only returns undefined. is there a way to fix this?

Answer 1

you should do this instead so that you manage only one subscription.

export class ProfileComponent implements OnInit {
    staff: Staff;
    user: User;

    constructor(private accountService: AuthenticationService, private staffService: StaffService) {

 

    }


  ngOnInit(): void {
        this.loadMember();

    }

    loadMember() {
    
      this.accountService.currentUser$
      .pipe(take(1), switchMap(user => this.staffService.getStaff(user.userName)))
      .subscribe(staff => {
        this.staff = staff;
      }) 
    }

}

Answer 2

Looks like the component is getting initialized before accountService has recieved a response, therefor by the time you call getStaff(this.user.username) the user still hasn't been initiailized.

Try delaying the call to this.loadMember() until after the user has been initialized:

   ngOnInit(): void {
     this.accountService.currentUser$.pipe(take(1)).subscribe(user =>{
       this.user = user;
       this.loadMember(this.user.username);
     });
   }

Answer 3

To avoid issues with values not being initialized, you can use rxjs operators with Observables;

  export class ProfileComponent implements OnInit {
    staff: Staff;
    user: User;
    // Define staff and user Observables. Use tap operator from 'rxjs/operators' to assign the values. Use mergeMap operator to call the getStaff function
    user$: Observable<User> = this.accountService.currentUser$.pipe(
      take(1),
      tap(user => this.user = user)
    );
    staff$: Observable<Sfaff> = this.staff$.pipe(
       mergeMap(({userName}) => this.staffService.getStaff(userName)),
       tap(staff => this.staff = staff)
    );

    constructor(private accountService: AuthenticationService, private staffService: StaffService) {
        
    }

    ngOnInit(): void {
        user$.subscribe();
        staff$.subscribe();

    }

  
}