时间戳

首页 > 解决方案 > 订阅完成后运行函数

javascript - 订阅完成后运行函数

问题描述

我有一些数据存储在 Firebase 实时数据库中。我希望我的 Angular 应用程序在启动时加载并显示它。我有一个加载数据的 TripService 和一个主 AppComponent。在 TripService 中，我使用 subscribe() 方法检索数据。但是，我无法将此数据发送到 AppComponent。我尝试将此订阅转换为 Promise，但我的解决方案不起作用。你能告诉我我犯了什么错误吗？另外，如何确保 AppComponent 在 TripService 加载后读取数据？

这是trip.service.ts中最重要的代码

export class TripService {
  trips: any;
  private db: AngularFireDatabase
  constructor(database: AngularFireDatabase) {
      this.db = database;
  }

  async loadAllTrips(){
    this.db.list('trips').snapshotChanges()
    .pipe(map(changes =>
      changes.map(c =>
        ({key: c.key, ...<Object>c.payload.val()}))))
    .subscribe(data => {
      this.trips = data;})
  }
}

这是 app.component.ts 中最重要的代码

export class AppComponent implements OnInit {
  ngOnInit() {
    this.tripService.loadAllTrips()
      .then(() => {this.trips = this.tripService.trips;);
  }
  trips: any;
}

标签： javascriptangulartypescriptfirebasees6-promise

解决方案

简单的解决方案是使用Observale

export class TripService {
  trips: any;
  private db: AngularFireDatabase
  constructor(database: AngularFireDatabase) {
      this.db = database;
  }

  loadAllTrips(){
    return this.db.list('trips').snapshotChanges()
    .pipe(map(changes =>
      changes.map(c =>
        ({key: c.key, ...<Object>c.payload.val()}))))
  }
}

在你的应用程序组件中

export class AppComponent implements OnInit {
  ngOnInit() {
    this.tripService.loadAllTrips()
      .subscribe(trips => this.trips = trips);
  }
  trips: any;
}

您只需返回一个 observable 并在您的组件中订阅它

推荐阅读