显示订阅的异步数据[重复]答案

【问题标题】：Show asynchronous datas of subscribe [duplicate]显示订阅的异步数据[重复]
【发布时间】：2017-12-31 12:21:06
【问题描述】：

借助 subscribe 函数和 forEach，我使用循环检索存储在 Firebase 中的数据。当我在订阅（“=== SUBSCRIBE ===”）中对我的数据执行console.log时，我得到了很好的结果，但是当我在外面执行console.log（“=== HOME ===”和"=== RETURN ===")，我有这个结果：

screen of console.log

我想这是因为它是异步的，请问如何解决这个问题？

这是我的代码：

statut: FirebaseListObservable<any[]>;
  statuts: Array<any> = [];

  // Données à enregistrer dans FireBase
  dateOfTheDay: string;
  dayOfWeek: number;

  constructor(public afDB: AngularFireDatabase, public storage: Storage) {
    moment.locale('fr');
    this.dateOfTheDay = moment().format('L'); // Date au format : 04/07/2017
    this.dayOfWeek = moment().day(); // Numéro du jour de la semaine (Ex : 1 pour lundi)
    this.statut = this.afDB.list('/statut');
  }

  statusToShow() {
    this.statut.subscribe(statut => {
      statut.forEach(s => {
        if (this.dateOfTheDay === s.statut_date_tache) {
          if (s.statut_id_tache in this.statuts === false) {
            this.statuts[s.statut_id_tache] = s;
          }
        }
      });

      console.log('=== SUBSCRIBE ===');
      console.log(this.statuts);
    });

    console.log('=== RETURN ===');
    console.log(this.statuts);

    return this.statuts;
  }

提前致谢

【问题讨论】：

不确定。一旦确保this 引用当前类或不在subscribe 之外。

标签： angular typescript firebase asynchronous ionic-framework

【解决方案1】：

评论：这是边界完全重复，但问题的后半部分不是，因此是答案。

您认为这是异步的假设是正确的，正如这里所介绍的How do I return the response from an Observable/http/async call in angular2?，您需要处理回调（subscribe）中的所有内容。但是，在这里您要返回响应。你不能这样做，就像这里所说的那样：https://stackoverflow.com/a/39296015 从subscribe 是不可能的。

您可以做什么，如答案中所述，您可以使用map，然后返回一个可观察对象，如果您想在视图中使用它，您可以订阅或使用async 管道。

从你需要的组件调用服务中的statusToShow()并订阅值：

服务：

statusToShow() {
  return this.afDB.list('/statut').map(statut => {
    for(let s of statut) {
      if (this.dateOfTheDay === s.statut_date_tache) {
        if (s.statut_id_tache in this.statuts === false) {
          return localStatuts[s.statut_id_tache] = s;
        }
      }
    }
    // return something else if value is not found above
  });
}

然后你可以在组件中订阅这个 observable 并获得statut 值：

组件：

constructor(private service: TodolistService) { }

ngOnInit() {
  this.service.statusToShow()
    .subscribe(statut => this.statut = statut)
}

建议你查看官方http-tutorial。我知道您使用的是 Firebase，但想法是一样的 :)

【讨论】：

谢谢，我试试这个。我在哪里订阅？
替换为this.statut = this.afDB.list('/statut'); :)
我有我的 todolistService（我的 statusToShow() 函数在哪里）和 home.ts，我想在其中检索我的数据
对不起，我不明白你的意思 :) 你想知道把这个return this.statut.map.... 代码放在哪里还是我完全误解了？
我的服务：pastebin.com/VDr13WpY，好吗？我想在我的 home.ts 中获取我的数据

【解决方案2】：

这里的问题是，this.statut.subscribe(statut => {}) 是一个异步函数。

您在此函数之外的console.log()s 已在订阅回调未完成时执行。你可以这样做：

statusToShow() {

let localStatuts: Array<any>

this.statut.subscribe(statut => {
  statut.forEach(s => {
    if (this.dateOfTheDay === s.statut_date_tache) {
      if (s.statut_id_tache in this.statuts === false) {
        localStatuts[s.statut_id_tache] = s;
      }
    }
  });

  console.log('=== SUBSCRIBE ===');
  console.log(localStatuts);

  this.statuts = localStatuts;
  return localStatuts;

  });
}

【讨论】：

谢谢，但是函数返回 void :/