在可观察对象中分配属性时避免异步问题答案

【问题标题】：avoid asynchronous issues when assign a property inside an observable在可观察对象中分配属性时避免异步问题
【发布时间】：2021-05-13 17:29:57
【问题描述】：

我正在分配一个可观察对象内的属性值：

this.sessionQuery.privateUser$.pipe(
  pluck('role')
).subscribe( userRole => {
  this.userRole = userRole; // userRole = true;
})

我的属性 userRole 现在的值为 true。问题是我需要立即将值为 true 的 userRole 属性用于其他方法，但是当执行其他方法时，userRole 值仍然未定义。我知道，这应该是异步的问题，但我希望立即将值设为 true，以便在其他方法中继续使用该值。

我尝试在订阅内的 userRole 分配之后执行其余方法，这可行，但出于代码组织的原因，我需要将其余方法放在订阅之外。

也许其他解决方案是强制代码执行等到第一次订阅完成

这些是放置在订阅下方的其他正确使用的方法：

isRepairOrCustomer(): string {
if (this.userRole && this.currentTaskRole === 'RepairCentre') {
  return 'Private';
} else if (!this.userRole && this.currentTaskRole === 'Customer') {
  return 'Public';
}

}

private setCurrentTaskTitle() {
if (this.userRole) {
  this.titleTask = this.internalStatus;
} else {
  this.titleTask = this.customerStatus;
}

}

【问题讨论】：

你能和我们分享更多代码吗？主要是你需要用到的功能
我刚刚添加了两个使用该属性的方法

标签： angular asynchronous observable

【解决方案1】：

如果你想等待订阅返回值，你有两种选择。其中之一是将您的呼叫带入订阅，如下所示：

this.sessionQuery.privateUser$.pipe(
  pluck('role')
).subscribe( userRole => {
  this.userRole = userRole; // userRole = true;
  const aux1 = this.isRepairOrCustomer()
  this.setCurrentTaskTitle()
})

或者将订阅转换为一个承诺，像这样：

const userRole = await this.sessionQuery.privateUser$.pipe(
  pluck('role')
).toPromise()

this.userRole = userRole; // userRole = true;
const aux1 = this.isRepairOrCustomer()
this.setCurrentTaskTitle()

记得在你使用这些调用的函数之前添加异步

【讨论】：

【解决方案2】：

你可以这样做：

class MyClass {
  
  ...

  userRole$: Obeserable<boolean> = this.sessionQuery.privateUser$
    .pipe(pluck('role'))

  // I don't know your types of 'internalStatus' and 'customerStatus'
  // because of that the any
  titleTask$: Observable<any> = this.userRole$.pipe(
    map((userRole) => userRole ? this.internalStatus : this.customerStatus)
  )

  isRepairOrCustomer$: Observable<string> = this.userRole$.pipe(
    map((userRole) => {
      if (userRole && this.currentTaskRole === 'RepairCentre') {
        return 'Private'
      } else if (!userRole && this.currentTaskRole === 'Customer') {
        return 'Public'
      }
    })
  )

  ...

}

在您的模板中，您可以使用 async 管道来订阅 observables。

【讨论】：