获取当前 Observable 状态的值

Question

所以我试图获取我的 Observable 的值（电子邮件）。我知道有一个叫做 BehaviourSubject 的东西，但我不能使用它，因为 firebase.User 似乎需要一个 Observable。

retrieveUserData(){
    let emailVal = "";

    this.userData.subscribe(
      {
        next: x =>  emailVal += x.email  && console.log(x.email),
        error: err => console.error('Observer got an error: ' + err),
        complete: () => console.log('Observer got a complete notification'),
      }
    );
    return emailVal;
}

所以我的目标是在 emailVal let 中获取 x.email，以便传递它并显示，因为例如。

问题是，我得到了一个（通过记录整个方法 retrieveUserData()），但是 console.log(x.email) 总是 returns 我正在寻找的值对于.

这是为什么 & 有没有办法获取值并将其存储在字符串、let 或其他内容中？

Answer 1

这是因为 Observables 是异步的。这意味着当您运行订阅可观察对象的方法时，它会运行执行命令而不会阻塞当前运行时间。此外，当可观察对象为运行时，您正在分配 emailVal 的值，但您 return 没有等待分配发生的情况下的值。

你能做什么？

您可以保留一个全局变量来全局保留电子邮件，并使用该变量在 html 端显示电子邮件。

@Component({
    selector: "my-app",
    // See here, I used emailVal to display it
    template: "<span>{{emailVal}}</span>",
    styles: [""]
})
export class TestComponent {
      emailVal = "";

      ngOnInit(): void {
          this.retrieveUserData();
      }

      retrieveUserData(): void {
          this.userData.subscribe(
              x => this.handleData(x.email),
              err => console.error("Observer got an error: " + err)
          );
      }

      handleData(email) {
          // Here, we assign the value of global variable (defined in class level)
          this.emailVal = email;
          console.log(email);
      }
}

您可以使用 rxjs 库，使可观察对象 return 成为值，return 成为可观察对象，如下所示
```
 retrieveUserData(): Observable<firebase.User> {
     return this.userData.pipe(
       map(x => x.email)
     );
 }
```
并且在html端，使用异步管道（作为示例）：
```
<span>{{retrieveUserData() | async}}</span>
```
async pipe 会订阅 observable 并等待它完成，然后取值并将其放入 span 的值中。你可以查看this StackBlitz example来深入了解这个方法。

获取当前 Observable 状态的值

Get value of current Observable state

javascript

observable

firebase

angular