如何将ngOninit与异步数据一起使用

时间:2020-06-03 20:14:26

标签: asp.net angular typescript asynchronous ngoninit

我正在ngOninit方法内调用服务方法,并将该服务方法的返回值分配给成员变量。稍后,我想再次在ngOnInit中使用此变量值。但是,我想由于同步问题,此变量未分配给某个值YET,而是已经尝试访问其值。我该如何解决这个问题?预先感谢

这是我正在使用的ngOnInit方法:

ngOnInit() {

    //Execute a service method here to get the user Id.
    this.authorizeService.getUser().subscribe(data => {
      this.userId = +data.sub;
    });

    //Pass the userId as a parameter to get the list associated with that user.
    this.service.getList(this.userId).subscribe(data => {
      this.list = data;
    })
  }

但是它说cannot read property sub of null。我已经在登录帐户中,并且我已经尝试嵌套这两个调用。结果是一样的。

我需要使用switchMapmergeMap嵌套这两个订阅调用。但是我不太了解他们的语法。

getUser() 服务方法

  public getUser(): Observable<IUser | null> {
    return concat(
      this.getUserFromStorage().pipe(filter(u => !!u), tap(u => 
      this.userSubject.next(u))),
      this.userSubject.asObservable());
  }

getList() 服务方法

  getList(userId: number): Observable<number[]> {
    return this.http.get<number[]>("myApiURLhere?userId=" + userId)
      .pipe(
        retry(1),
        catchError(this.errorHandler)
      );
  }

错误:

Argument of type '(data: IUser) => void' is not assignable to parameter of type '(value: IUser, index: number) => ObservableInput<any>'.

类型'void'不能分配给类型'ObservableInput'

2 个答案:

答案 0 :(得分:0)

由于两个函数都是异步调用,因此您可能要使用 switchMap rxjs运算符,以避免处理多个预订:


import { switchMap} from 'rxjs/operators';

ngOnInit() {
 this.authorizeService.getUser().pipe(
  switchMap(data => {
   this.service.getList(+data.sub)
})).subscribe( data => this.list = data)
}

答案 1 :(得分:0)

您使用的是什么角度版本?如果显示代码以查看更多详细信息并能够提供帮助,