订阅完成后运行函数

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;
}

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

Answer 2

我相信当您尝试将其转换为承诺时，您做错了。您应该添加 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);
  }