简体   繁体   English

Angular - 等到 function 返回值并订阅

[英]Angular - Wait until function return value with subscribe

I want to create an array of objects with values retrieved in my firebase real time database.我想创建一个对象数组,其中包含在我的 firebase 实时数据库中检索到的值。

For that, I use AngularFire library.为此,我使用 AngularFire 库。

I have 4 functions that I use for return values into my array, but when I try to do it, all values are undefined.我有 4 个函数用于将值返回到我的数组中,但是当我尝试这样做时,所有值都是未定义的。

This is my code:这是我的代码:

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

As you can see, I've try to use async/await in the first function, but nothing change...如您所见,我尝试在第一个 function 中使用 async/await,但没有任何改变......

Did I do something wrong?我做错什么了吗? I need your help, I am lost since 2 weeks now...我需要你的帮助,我已经迷路了 2 周了......

Thank you all !谢谢你们 !

PS: "getChats()" function is called on init. PS: "getChats()" function 在初始化时被调用。

One approach would be to promisify your subscription and handle the promises elegantly.一种方法是承诺您的订阅并优雅地处理承诺。

try the below approach.试试下面的方法。 Its been cleaner this way than to handle too many Observables.这种方式比处理太多的 Observable 更干净。

https://stackblitz.com/edit/angular-jgkvy5 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM