gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 18:57:47 24 4
gpt4 key购买 nike

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

我有一个项目列表,其中包含对象中的用户 ID。我希望将此用户 ID 传递给类似于

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

在应用程序的 html 部分。

然后我想使用这个 ID 提取用户名等,它也存储在 firebase 中并且具有与相同用户 ID 相同的 key 。

以下选项是我已经尝试过的;

选项 1(只是同一组件中的一个函数)

Outputs undefined 我相信这是因为函数运行并且在订阅将数据传递到之前返回用户名变量

constructor(public db: AngularFireDatabase){}

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

选项 2(创建服务 - 可注入(inject),以便将其传递给对象属性)

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

username;

constructor(public db: AngularFireDatabase){}

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

所以我需要的是类似选项 1 的东西,但它需要在 observable 获取数据并将其传递给函数内的变量后返回 observable 内的值,这样它就不会返回 undefined 值。

最佳答案

这里的一个重要概念是 Observable 是异步的,因此您不能像使用常规值那样“返回”它的值。您必须等待它发出 一个值,然后才能返回该值。在这里阅读更多相关信息:https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 .

对于您要具体尝试做的事情,我建议只获取 Observable 并在模板中需要时使用“async”管道。

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

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

关于javascript - 如何将 Observable 内部的值作为 Angular 2+ 中的函数返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48463685/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com