Angular - Дождаться, пока функция вернет значение с подпиской

Question

Я хочу создать массив объектов со значениями, полученными в моей базе данных 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
    })
  }

Как видите, я пытаюсь использовать асинхронный / жду в первой функции, но ничего не изменится ...

Я что-то не так сделал? Мне нужна ваша помощь, я потерян уже 2 недели ...

Спасибо всем!

PS: функция "getChats ()" вызывается при инициализации.

Answer 1

Один из подходов состоит в том, чтобы обещать вашу подписку и элегантно обрабатывать обещания.

попробуйте следующий подход. Так было чище, чем обрабатывать слишком много наблюдаемых.

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(()=>'');
  }
}

Answer 2

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

}