Angular Firestore 映射文档到对象

Question

我正在尝试从 Firestore 获取单个文档到 Angular 项目并将其映射到对象以在 HTML 中执行更新操作。

但是，当我在 ngOnInit() 中订阅文档时，会多次调用 get document 方法。

服务是：

async getUid() {
    return (await this.angularFireAuth.currentUser).uid;
}

getCustomer(id: string, userId: string) {
    this.customerDocument = this.angularFireStore
      .collection('customers')
      .doc(userId)
      .collection('customersByUid')
      .doc(id);

    return this.customerDocument.snapshotChanges();
}

组件是：其中“console.log(this.customer)”被多次调用。

ngOnInit() {
    this.createCustomerForm();
    const docId = this.customerService.customerData.id;
    console.log('DOCID IS: ' + docId);

    this.customerService.getUid().then((x) => {
      this.userId = x;
      console.log('USER ID IS: ' + x);

      this.customerService
        .getCustomer(docId, this.userId)
        .subscribe((action) => {
          (this.customer = {
            id: action.payload.id,
            ...(action.payload.data() as ICustomer),
          }),
            (err: any) => {
              console.debug(err);
            };
          console.log(this.customer);
        });
    });
  }

然后尝试在 ts 和 html 中使用 this.customer 变量。

如何将此文档正确映射到 ts 和 html 中使用的对象？

谢谢。

编辑：这个问题也与 ngOnInit() 中的方法被调用两次或多次有关Why is ngOnInit called twice?

Answer 1

通过取消订阅 ngOnInit() 上的订阅来解决此问题

谢谢。