[英]How do I return the value inside of an Observable as the function in Angular 2+
好的,基本上我一直在努力使用用户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的东西,但是一旦可观察对象获得数据并将其传递给函数内部的变量,它就需要在可观察对象内部返回值,这样它就不会返回未定义的值。
这里的一个重要概念是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);
}
但是请记住要处理订阅。
尝试做这样的事情:
您无法返回您的订阅的值,您必须在订阅中完成所有操作,如果您拥有主要数据,则必须在.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>
这是一个想法,您如何解决此问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.