Angular - 等到函数返回值时再使用subscribe

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

正如你所看到的，我已经尝试在第一个函数中使用asyncawait，但没有任何变化......。

我做错了什么吗？我需要你的帮助，我迷路了，因为2个星期了... ...

谢谢大家!

PS : "getChats() "函数是在init上调用的。

Answer 1

一种方法是对你的订阅进行承诺，并优雅地处理承诺。

试试下面的方法。比起处理太多Observables，这种方式更干净。

https:/stackblitz.comeditangular-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();

}