【问题标题】:Using Observer as an Observable in Angular在 Angular 中使用 Observer 作为 Observable
【发布时间】:2018-10-08 05:25:24
【问题描述】:

我只是对 Angular 的可观察对象和主题感到困惑。我已经搜索过类似的问题,但没有找到满足我需求的正确答案。

假设我有一个可观察的类型变量,它监听 Firestore 中的数据更改并保存更改,如下所示:

export class AcademyProvider {

  public currentAcademy: Observable < any > ;
  private db: any;

  constructor(public http: HttpClient,
    private afs: AngularFirestore,
    private accountProvider: AccountProvider) {
    this.db = firebase.firestore();
  }
  //This method gets the details of the current logged academy
  getCurrentAcademy(academyID): Promise < any > {
    return new Promise((resolve, reject) => {
      this.db.collection("academy").where("id", "==", academyID).onSnapshot(
        (academy) => {
          if (!academy.empty) {
            this.currentAcademy = academy.docs[0].data();
            console.log(this.currentAcademy);
            resolve(academy.docs[0].data());
          } else {
            //academy does not exist
            reject(false);
          }
        },
        //academy error
        (error) => {
          reject(error);
        })

    });
  }
}

现在我想要的是使用相同的 AcademyProvider 从不同的页面(例如播放器或设置页面)收听变量 currentAcademy 的变化。 我的意思是,我想使用 currentAcademy 变量作为 Firestore 更改的观察者(目前由上述代码完成),以及其他页面组件监听的 observable。

这可能吗?我遇到了一些使用主题类型的教程,但我无法让它与我的代码一起使用。

注意:我知道我可以从其他页面中获取 currentAcademy 变量的值,例如:AcademyProvider.currentAcademy['FieldName'] 左右,但这并不总能保证返回的值是最新的。

提前致谢!

【问题讨论】:

    标签: angular typescript ionic3 observable google-cloud-firestore


    【解决方案1】:

    如果您在初始化观察时不关心获取值,请使用Subject,如果您想在首次订阅观察者时接收值,请使用BehaviorSubject

    public currentAcademy: BehaviorSubject<any> = new BehaviorSubject(null);
    public currentAcademy: Subject<any> = new Subject();
    

    在您的订阅中,当您获取数据时,将其传输到您的主题:

    this.currentAcademy.next(academy.docs[0].data());
    

    在你的组件中,你现在可以订阅这个观察者了:

    this.myService.currentAcademy.subscribe(data => console.log(data));
    

    【讨论】:

    • 它仍然无法正常工作,在组件中它总是说数据未定义。
    • 那么你在获取数据时遇到了问题。
    • 不,我实际上是在使用上述代码在提供程序中正确获取数据。但我无法使用您的代码将此数据传输到其他组件。
    • 对不起,我不相信你。这应该有效。如果没有,请使用模拟数据创建minimal reproducible example 来证明这一点。
    猜你喜欢
    • 2019-01-02
    • 1970-01-01
    • 2017-11-13
    • 2021-11-08
    • 2017-11-13
    • 2016-07-23
    • 2016-07-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多