獲取當前 Observable 狀態的值

Question

所以我試圖獲取我的 Observable<firebase.User> 的值（電子郵件）。 我知道有一種叫做 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) 總是返回我正在尋找的值。

為什么 & 有沒有辦法獲取值並將其存儲在字符串中，讓或其他東西？

Answer 1

這是因為 Observable 是異步的。 這意味着當您運行 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 的值中。 您可以查看此 StackBlitz 示例以深入了解此方法。