Question

所以我试图获取Observable 的值（电子邮件）。我知道有一个叫做BehaviourSubject的东西，但是由于firebase我无法使用它。用户似乎需要一个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 ，以便通过并显示。

问题是，我得到了（通过记录整个方法restoreUserData（）），但是console.log（x.email）始终返回我要查找的值。

为什么＆可以获取值并将其存储在字符串，let或其他方式中？

Answer 1

这是因为Observable是异步的。这意味着当您运行可观察对象的subscribe方法时，它将在不阻止当前运行时的情况下运行命令。另外，在运行observable时，您正在分配emailVal的值，但无需等待分配完成就返回该值。

你能做什么？

您可以保留一个全局变量以使电子邮件保持全局，并使用该变量在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库，以这种方式使observable返回值并按以下方法返回observable
```
 retrieveUserData(): Observable<firebase.User> {
     return this.userData.pipe(
       map(x => x.email)
     );
 }
```
在html端，使用异步管道（例如）：
```
<span>{{retrieveUserData() | async}}</span>
```
异步管道将订阅observable并等待其完成，然后将其取值并将其放入span的值中。您可以检查this StackBlitz example来深入了解此方法。

获取当前可观察状态的值

1 个答案: