【问题标题】:Dynamically subscribe to firebase observable动态订阅 firebase observable
【发布时间】:2018-08-28 10:20:07
【问题描述】:

我有一个字符串数组,它们也是 Firebase 实时数据库中端点的键。我想遍历这个数组并为每个键获取 Firebase 对象。

我没有得到以下代码的响应

有没有办法动态订阅 Firebase Observables?

sortedArray:any = ["x","y","z"]

方法:

  getItems() {
        this.sortedArray.forEach(el => {
          this.ngDB.object(`items/${el}`).valueChanges()
          .toPromise().then((res) => {
            console.log("Found Item",res);
          })
          .catch(err => {
            console.log("Err listing items", err);
          })          
        });
  }

【问题讨论】:

  • this.ngDB.object 正在返回一个 Observable ?
  • @Luillyfe 是的,它返回并且 Obdervable 我使用 toPromise() 方法转换为承诺
  • 检查这个:stackoverflow.com/questions/49325904/… 我在这里使用了来自 firebase 的数组,每一步都被描述为从每个键值对中只选择一条记录,我认为这会对你有所帮助

标签: javascript firebase firebase-realtime-database observable angularfire2


【解决方案1】:

问题与这里有关:.toPromise().then((res) => { 当您从 Observable 更改为 Promise 时,该代码不再跟踪更改。继续使用您的 Observable 并订阅即可。

getItems() {
    this.sortedArray.forEach(el => {
        this.ngDB.object(`items/${el}`)
        .valueChanges()
        .subscribe(res => {
            console.log("Found Item",res);
        }, err => {
            console.log("Err listing items", err);
        })          
    });
}

【讨论】:

    【解决方案2】:

    我会坚持使用 Angular 中的 Observables。最终,这里的答案取决于您需要如何“压平”它们。

    简单来说,你可以结合所有valueChanges的最新结果

    getItems() {
      Observable.withLatestFrom(
        this.sortedArray
          .map { id => this.ngDB.object(`items/${id}`).valueChanges() }
      )
    }
    

    但这有几个反模式;即你有一个可观察的“吸气剂”。与 Promise 不同,Observable 是开箱即用的惰性对象,因此无需使用函数包装。 此外,getter 函数只是自找麻烦,因为如果多次调用它可能会得到令人惊讶的结果,以及如何处理所有订阅?你没有跟踪他们。

    更好的模式是将项目(或items$ 是您使用芬兰符号)设置为属性。但是如果你改变sortedArray呢?您需要处理现有订阅并更改 Observables...如果我们将 sortedArray 更改为 Observable(或 BehaviorSubject,如果您需要与非 Rx 轻松互操作)我们会为“免费”与switchMap:

    this.items = this.sortedArray.switchMap(ids =>
      Observable.combineLatest(
        ids.map { id => this.ngDB.object(`items/${id}`).valueChanges() }
      }
    }
    

    然后在您的视图中使用async 管道,使用RxJS 运算符将其与其他可观察对象混合匹配,或者调用.subscribe 以获取随着时间的推移的值。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-12-29
      • 1970-01-01
      • 2021-02-24
      • 2023-04-02
      • 2018-08-28
      • 2017-07-08
      相关资源
      最近更新 更多