Javascript 如何将可观察对象内部的值返回为角度2+；

好的，所以基本上我一直在努力使用用户ID获取存储在firebase中的用户详细信息

我有一个项目列表，其中包含对象中的用户ID。我想把这个用户id传递给一个函数，比如

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

选项2（创建了一个可注入的服务，以便将其传递给对象属性）

输出我需要的内容，但对所有列表元素显示相同的内容

username;

constructor(public db: AngularFireDatabase){}

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

---

所以我需要的是类似于选项1的东西，但一旦可观察对象获得数据并将其传递给函数内的变量，它需要返回可观察对象内的值，这样它就不会返回未定义的值。

这里的一个重要概念是，

可观察对象

是异步的，所以不能只是“返回”它的值可能与常规值相同。您必须等待它发出一个值，然后才能返回该值。请在此处阅读更多相关信息：

对于您试图具体执行的操作，我建议只获取

可观察的

，并在模板中需要时使用“async”管道

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

---

但请记住处理订阅的清理。

尝试执行以下操作：

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

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

你不能为你的订阅返回值，你必须在订阅中做所有的事情，如果你有主数据，你必须在.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>

{{final_array.user_name}}

---

这是一个如何解决这个问题的想法

你试过{{getUserName（item.userId）| async}}吗？我试过了，但它传递了整个对象的所有属性，我希望它只显示该对象的['username']属性。然后{{getUserName（item.userId）。username{124; async}不起作用吗？试着

username=v.username

{getUserName>（item.userId）.username | async}}不起作用：/两个username=v.username（我想这是因为它是一个对象而不是数组）感谢@VinceCompanale的回答，但是这会将整个内容传递到html，结果是什么都没有显示。我只需要将用户名传递到html。要得到这个答案，请尝试

{{（getUserData（user.id）| async）？.username}

{{（getUserData（user.id）| async）？.username}

也不起作用：/老实说，这不是我真正需要的。也许我不能很好地解释我自己。我的想法是，我有多个应用程序用户，每个用户都将一些内容发布到共享源。用户名可以稍后更改，所以我不想在源中发布用户名，而是用发布项发布用户id然后使用ngFor在页面上列出它，这就像一个符咒，但在ngFor循环中，我需要以某种方式获取该用户id，并使用一个函数返回该用户id的用户名，该用户名也在firebase中。

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