运行订阅完成后的一个功能

Question

我有一些数据存储在 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;
}

Answer 1

简单的解决方案是使用 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;
}

您只需 return 一个可观察对象并在您的组件中订阅它

Answer 2

我相信当您尝试将其转换为 promise 时，您做错了。您应该添加 take(1) 以仅参加 1 个事件，然后承诺将完成

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

运行订阅完成后的一个功能

Run a function after subscription is complete

javascript

firebase

typescript

es6-promise

angular