如何在Angular 2+中將Observable內部的值作為函數返回

Question

好的，基本上我一直在努力使用用戶ID獲取存儲在Firebase中的用戶詳細信息。

我有一個對象列表，其中包含用戶ID。 我希望將此用戶ID傳遞給類似的函數

<div *ngFor="let item of items">
    <p>{{getUsername(item.userId)}}</p>
</div>

在應用程序的html部分中。

然后使用此ID，我想提取用戶名等，該用戶名也存儲在firebase中，並且具有與相同用戶ID相同的密鑰。

我已經嘗試過以下選項：

選項1（只是功能在同一組件上）

我認為這是輸出未定義的原因，因為該函數運行並在訂閱將數據傳遞到其中之前返回用戶名變量。

constructor(public db: AngularFireDatabase){}

getUserName(id) {
    var username;
    this.db.object('users/' + id).valueChanges().subscribe(v => {
        username = v['username'];
    });
    return username;
}

選項2（創建了服務-可注入，因此將其傳遞給對象屬性）

輸出我需要的內容，但所有列表元素都顯示相同的內容

username;

constructor(public db: AngularFireDatabase){}

getUserName(id) {
    this.db.object('users/' + id).valueChanges().subscribe(v => {
        this.username = v['username'];
    });
    return this.username;
}

所以我需要的是類似於選項1的東西，但是一旦可觀察對象獲得數據並將其傳遞給函數內部的變量，它就需要在可觀察對象內部返回值，這樣它就不會返回未定義的值。

Answer 1

這里的一個重要概念是Observable是異步的，因此您不能像常規值那樣僅僅“返回”它的值。 您必須等待它emit一個值，然后才能返回該值。 在此處閱讀有關此內容的更多信息： https : //gist.github.com/staltz/868e7e9bc2a7b8c1f754 。

對於您要嘗試做的事情，我建議您僅獲取Observable並在模板中需要時使用“異步”管道。

getUserData(id): Observable<YourData> {
  return this.db.object('users/' + id).valueChanges();
}

然后，您可以在模板中執行以下操作：

<li *ngFor=let user of users"> {{ getUserData(user.id) | async }}</li>

---

如果您知道組件中的用戶id並想獲取該用戶的用戶數據並在組件代碼中使用它，則可以執行以下操作：

userData: YourData;
@Input() id: any; // provided by parent component

ngOnInit() { // OnInit lifecycle hook
  this.db.object('users/' + this.id).valueChanges().subscribe(data => this.userData = data);
}

但是請記住要處理訂閱。

Answer 2

嘗試做這樣的事情：

您無法返回您的訂閱的值，您必須在訂閱中完成所有操作，如果您擁有主要數據，則必須在.ts中循環調用getUserName函數，然后使用所有信息創建最終數組，一旦有了最終數組，就可以在HTML中使用* ngFor循環。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-restaurant-menu',
  templateUrl: 'restaurant-menu.html',
})


export class YourClass {
     public userName : String;
     public navData  : any;
     public final_array : any  

    constructor(public navCtrl: NavController, public navParams: NavParams, public) {
      this.navData = this.navParams.get('users');
      for(let user of this.navData){
          this.getUserName(user.id, user)
      }

  }


getUserName(id, user) {
    this.db.object('users/' + id).valueChanges().subscribe(v => {
        //here you have to create your final array whit the information
        this.final_array.push({user_data:user, user_name:v['username']})

    });
}


}

然后，您可以在HTML中使用* ngFor

<p>{{ final_array.user_name }}<p>

這是一個想法，您如何解決此問題