如何解决订阅完成后运行一个函数
我在 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;
}
解决方法
简单的解决方案是使用 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 并在您的组件中订阅它
,我相信当您尝试将其转换为 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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。