如何在Angular 2+中将Observable内部的值作为函数返回

Question

Ok so basically I have been struggling to get user details stored in firebase using the user ID.

I have a list of items that contain the user ID's in the object. I want this user id to be passed on to a function something like

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

in the html part of the app.

Then using this ID I want to pull username etc. which is stored in firebase as well and has the key as the same user id.

Following options are the things I tried already;

Option 1 (Just a function at the same component)

Outputs undefined which is I believe is because the function runs and returns the username variable before the subscription passes the data into it.

constructor(public db: AngularFireDatabase){}

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

Option 2 (created a service - Injectable so it passes it to object property)

Outputs what I need but it shows the same for all the list elements

username;

constructor(public db: AngularFireDatabase){}

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

So what I need is something like option 1 but it needs to return the value inside the observable once the observable got the data and passed it to the variable inside the function so it doesn't return an undefined value.

Answer 1

An important concept here is that the Observable is asynchronous, so you can't just "return" it's value as you might with a regular value. You have to wait for it to emit a value before you can return that value. Read more about that here: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 .

For what you're trying to do specifically, I'd recommend just getting the Observable and using the 'async' pipe when you need it in the template.

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

Then in your template, you can do something like this:

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

---

If you know the user id off the bat in your component and you want to get the user data for that user and use it in your component code, you can do something like this:

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);
}

But remember to handle the cleanup of the subscription.

Answer 2

Try to do something like this:

You can´t return the value for your subscribe, you have to do all inside the subscribe, if you have the main data you have to make a loop in your .ts calling your getUserName function and then create the final array with all the information, once you have your final array you can loop with *ngFor in your HTML.

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']})

    });
}


}

Then in your HTML you can use *ngFor

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

This is an idea how can you resolve this problem