[英]Angular - Wait until function return value with subscribe
我想创建一个对象数组,其中包含在我的 firebase 实时数据库中检索到的值。
为此,我使用 AngularFire 库。
我有 4 个函数用于将值返回到我的数组中,但是当我尝试这样做时,所有值都是未定义的。
这是我的代码:
getChats(){
this.path = '/Users/' + this.uid;
this.sub1 = this.CrudService.all(this.path + '/Chats').subscribe((chats:any) =>{
if(chats.length){
for(let i = 0; i < chats.length; i++){
this.chats[i] = {};
this.chats[i].chatID = chats[i].chatID;
this.chats[i].contenderPicture = this.getContenderImg(chats[i].contenderID);
this.chats[i].firstLetterName = this.getContenderNameTruncated(chats[i].contenderID);
this.chats[i].lastMessage = this.getLastSentence(chats[i].chatID);
this.chats[i].lastTime = this.getLastSentenceHour(chats[i].chatID);
}
}
})
}
getContenderImg(contenderID:any){
var path = '/Users/' + contenderID + '/profile_picture/0/url';
this.sub1 = this.CrudService.read(path).subscribe(async picture => {
await picture
return picture
});
}
getContenderNameTruncated(contenderID:any){
var path = '/Users/' + contenderID + '/fname';
this.sub2 = this.CrudService.read(path).subscribe((fname:any) => {
var fnameLetter = fname.charAt(0);
var truncated = fname.replace(/./gi, '*');
var rmLastStar = truncated.slice(0, -1);
var nameTruncated = fnameLetter + rmLastStar
return nameTruncated
});
}
getLastSentence(chatID:any){
var path = '/Chats/' + chatID + '/lastMessage';
this.sub3 = this.CrudService.read(path).subscribe((lastMessage:any) => {
return lastMessage
});
}
getLastSentenceHour(chatID:any){
var path = '/Chats/' + chatID + '/lastTime';
this.sub4 = this.CrudService.read(path).subscribe(lastTime => {
return lastTime
})
}
如您所见,我尝试在第一个 function 中使用 async/await,但没有任何改变......
我做错什么了吗? 我需要你的帮助,我已经迷路了 2 周了......
谢谢你们 !
PS: "getChats()" function 在初始化时被调用。
一种方法是承诺您的订阅并优雅地处理承诺。
试试下面的方法。 这种方式比处理太多的 Observable 更干净。
https://stackblitz.com/edit/angular-jgkvy5
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
path = "";
uid = "";
chats: any[] = [];
constructor(private CrudService: any) {}
getChats() {
this.path = "/Users/" + this.uid;
this.CrudService.all(this.path + "/Chats")
.toPromise()
.then(async (chats: any) => {
if (chats.length) {
for (let i = 0; i < chats.length; i++) {
this.chats[i] = {};
this.chats[i].chatID = chats[i].chatID;
this.chats[i].contenderPicture = await this.getContenderImg(chats[i].contenderID);
this.chats[i].firstLetterName = await this.getContenderNameTruncated(chats[i].contenderID);
this.chats[i].lastMessage = await this.getLastSentence(chats[i].chatID);
this.chats[i].lastTime = await this.getLastSentenceHour(chats[i].chatID);
}
}
});
}
getContenderImg(contenderID: any) {
var path = "/Users/" + contenderID + "/profile_picture/0/url";
return this.CrudService.read(path).toPromise().catch(()=>'');
}
getContenderNameTruncated(contenderID: any) {
var path = "/Users/" + contenderID + "/fname";
return this.CrudService.read(path).toPromise()
.then((fname: any) => {
let fnameLetter = fname.charAt(0);
let truncated = fname.replace(/./gi, "*");
let rmLastStar = truncated.slice(0, -1);
let nameTruncated = fnameLetter + rmLastStar;
return nameTruncated;
})
.catch(()=>'');
}
getLastSentence(chatID: any) {
var path = "/Chats/" + chatID + "/lastMessage";
return this.CrudService.read(path).toPromise().catch(()=>'');
}
getLastSentenceHour(chatID: any) {
var path = "/Chats/" + chatID + "/lastTime";
return this.CrudService.read(path).toPromise().catch(()=>'');
}
}
getChats(){
this.path = '/Users/' + this.uid;
this.sub1 = this.CrudService.all(this.path + '/Chats').subscribe((chats:any) =>{
if(chats.length){
for(let i = 0; i < chats.length; i++){
this.chats[i] = {};
this.chats[i].chatID = chats[i].chatID;
forkJoin(
this.getContenderImg(chats[i].contenderID),
this.getContenderNameTruncated(chats[i].contenderID),
this.getLastSentence(chats[i].chatID),
this.getLastSentenceHour(chats[i].chatID)
).subscribe(res => {
this.chats[i].contenderPicture = res[0];
this.chats[i].firstLetterName = res[1];
this.chats[i].lastMessage = res[2];
this.chats[i].lastTime = res[3];
})
// this.chats[i].contenderPicture = this.getContenderImg(chats[i].contenderID);
// this.chats[i].firstLetterName = this.getContenderNameTruncated(chats[i].contenderID);
// this.chats[i].lastMessage = this.getLastSentence(chats[i].chatID);
// this.chats[i].lastTime = this.getLastSentenceHour(chats[i].chatID);
}
}
})
}
getContenderImg(contenderID:any){
var path = '/Users/' + contenderID + '/profile_picture/0/url';
var subject = new Subject<any>();
this.sub1 = this.CrudService.read(path).subscribe(picture => {
// await picture
// return picture
subject.next(picture);
subject.complete();
});
return subject.asObservable();
}
getContenderNameTruncated(contenderID:any){
var path = '/Users/' + contenderID + '/fname';
var subject = new Subject<any>();
this.sub2 = this.CrudService.read(path).subscribe((fname:any) => {
var fnameLetter = fname.charAt(0);
var truncated = fname.replace(/./gi, '*');
var rmLastStar = truncated.slice(0, -1);
var nameTruncated = fnameLetter + rmLastStar
// return nameTruncated
subject.next(nameTruncated);
subject.complete();
});
return subject.asObservable();
}
getLastSentence(chatID:any){
var subject = new Subject<any>();
var path = '/Chats/' + chatID + '/lastMessage';
this.sub3 = this.CrudService.read(path).subscribe((lastMessage:any) => {
// return lastMessage
subject.next(lastMessage);
subject.complete();
});
return subject.asObservable();
}
getLastSentenceHour(chatID:any){
var subject = new Subject<any>();
var path = '/Chats/' + chatID + '/lastTime';
this.sub4 = this.CrudService.read(path).subscribe(lastTime => {
// return lastTime
subject.next(lastTime);
subject.complete();
})
return subject.asObservable();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.