Angular Firestore 映射文档到对象

Posted 2023-03-13

【中文标题】Angular Firestore 映射文档到对象

【英文标题】：Angular Firestore Map Document To Object

【发布时间】：2021-09-03 04:32:05

【问题描述】：

我正在尝试从 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?

【参考方案1】：

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

谢谢。