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

Question

我是 Angular 的新用户，请多多包涵。

我想在我的 angular 10 应用程序中获取当前用户的用户名但是当我尝试加载仪表板时，出现以下错误。 后端用.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)

这是我在配置文件组件中尝试获取用户详细信息的代码

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

  
}    

我这里的 StaffService 代码是从 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)
  }

我不明白为什么它不起作用我尝试控制 this.user.userName 但它只返回未定义。 有没有办法来解决这个问题？

Answer 1

您应该改为这样做，以便您只管理一个订阅。

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

看起来组件在 accountService 收到响应之前正在初始化，因此当您调用getStaff(this.user.username)时，用户仍未初始化。

尝试this.loadMember()的调用延迟到用户初始化之后：

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

Answer 3

为避免值未初始化的问题，您可以对 Observables 使用rxjs运算符；

  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();

    }

  
}