服务比页面慢 |离子 4 |火力地堡

Question

首先：总的来说，我对编码还很陌生。对不起，如果这个问题很愚蠢^^ 我尝试使用 firestore 在 ionic 中构建一个简单的应用程序。现在我想创建一些简单的服务。现在我遇到了问题，服务在 "this.userData = this.userService.currUser"通过了。也就是说，我在 this.userData.

中没有数据

如何正确执行此操作？ :/

谢谢！

服务：

export class UserServiceService {
  public currUser: any;
  private currUserRef: any;

  constructor(private afs: AngularFirestore, public afAuth: AngularFireAuth) {
    const currUserId = afAuth.auth.currentUser.uid;
    this.currUserRef = afs.collection('users').doc(currUserId).valueChanges();
    this.currUser = this.currUserRef.subscribe(data => {
      return data;
    });
  }
}

页面：

export class EventlistPage implements OnInit {

  private events: Observable<Event[]>;
  private userData;

  constructor(private eventService: EventService, private afAuth: 
  AngularFireAuth, public userService: UserServiceService) { }

  ngOnInit() {
    this.events = this.eventService.getEvents();
    this.userData = this.userService.currUser;
  }

}

Answer 1

将您的 Observable 转换为 Promise 并使用 .then()

因此您的服务将如下所示

export class UserServiceService {
  public currUser: any;
  private currUserRef: any;
  constructor(private afs: AngularFirestore, public afAuth: AngularFireAuth) {
    const currUserId = afAuth.auth.currentUser.uid;
    this.currUserRef = afs.collection('users').doc(currUserId).valueChanges();
  }
  getDataFromFireStore(){
   return this.currUserRef.toPromise();
  }
}

并且在您的用户中 class

export class EventlistPage implements OnInit {
  private events: Observable<Event[]>;
  private userData;
  constructor(private eventService: EventService, private afAuth: 
  AngularFireAuth, public userService: UserServiceService) { }

  ngOnInit() {
    this.events = this.eventService.getEvents();
    this.userService.getDataFromFireStore().then(data => this.userData = data);
  }

}

服务比页面慢 |离子 4 |火力地堡

Service slower than page | Ionic 4 | Firebase

firebase

ionic-framework

ionic4

google-cloud-firestore