Angular/Firestore 集合文档查询将所有文档中的单个文档字段返回到数组中答案

【问题标题】：Angular/Firestore Collection Document Query to return a single document field from all documents into an arrayAngular/Firestore 集合文档查询将所有文档中的单个文档字段返回到数组中
【发布时间】：2021-07-29 23:32:33
【问题描述】：

我正在对我的收藏文档执行查询，并尝试将所有电话号码返回到一个数组中。我只想将电话号码设置为数组以供另一个函数使用。 Firebase 文档仅显示 (doc.id) 和 (doc.data) 的控制台日志，对文档中的任何其他对象没有实际用途。我的 info.phoneNumbers 控制台日志返回所有 phoneNumbers。

    async getPhone() {
    await this.afs.collection('members', ref => ref.where('phoneNumber', '>=', 0))
    .get().toPromise()
    .then(snapshot => {
      if (snapshot.empty) {
        console.log('No Matches');
        return;
      }
      this.getInfo(snapshot.docs);
      });
    }
    getInfo(data) {
      data.forEach(doc => {
        let info = doc.data();
        console.log(info.phoneNumber, 'Phonenumbers');
        // let myArray = [];
        // myArray.push(doc.doc.data());
        // const phoneNumber = info.phoneNumber as [];
        // console.log(myArray, 'ARRAY');
        return info.phoneNumber;
      })
  }```

【问题讨论】：

您好，请使用 .map 而不是 forEach。 data.map() 并从 getInfoData() 中返回
我在我的 snapshot.docs（所有文档）上使用 forEach，正如我所说，它给了我所有的电话号码。我的控制台日志返回所有带有 info.phoneNumber 的号码。这是我想要的结果，但我正在尝试将这些数字设置为可以在模板中使用的数组。使用 data.map() 现在记录 1 个号码。感谢您的建议。

标签： arrays angular google-cloud-firestore

【解决方案1】：

Firestore 是一个“文档存储数据库”。您一次获取并存储整个 DOCUMENTS（想想“JSON 对象”）。使用文档存储数据库时的“反模式”之一是以 SQL/关系数据库术语来考虑它们。在 SQL/关系数据库中，您“规范化”数据。但是在文档存储数据库（“NoSQL”数据库）中，我们显式地denormalize数据——也就是说，我们在写操作时跨文档复制数据。这样，当您获取一个文档时，它就会包含您使用案例所需的所有数据。您通常希望避免“JOIN”并限制数据模型中的引用/键的数量。

您在上面的代码中显示的内容在获取文档和从每个文档中提取 phoneNumber 字段方面是有效的。但是，.forEach() 的使用可能不是您想要的。 forEach() 遍历给定数组并运行一个函数，但 forEach() 的返回值是 undefined。所以你代码中的return info.phoneNumber实际上并没有做任何事情。

您可以改用.map()，其中 map() 函数的返回值是一个新数组，原始数组的每个条目都包含一个条目，而该新数组的值是 map() 的返回值)的回调参数。

另外，混合await 和.then()/.catch() 通常不是一个好主意。它通常会导致意想不到的结果。我尽量使用await和try/catch，尽量避免使用.then()/.catch()。

所以我会选择类似的东西：

try {
  let querySnap = await this.afs.collection('members', ref => 
  ref.where('phoneNumber', '>=', 0)).get();

  let phoneNumbers = await this.getInfo(querySnap.docs[i].data());
} catch(ex) {
  console.error(`EXCEPTION: ${ex.message}`);
}

getInfo(querySnapDocs) {
    let arrayPhoneNumbers = querySnapDocs.map(docSnap => {
        let info = doc.data();
        let thePhoneNum = info.phoneNumber
        console.log(`thePhoneNum is: ${thePhoneNum}`);
        return thePhoneNum;
      });

    return arrayPhoneNumbers;
  });

【讨论】：

你的解释很好。您的代码与我已有的相同，只是您添加了额外的变量并重命名了我已有的所有内容。我没有返回变量phoneNumber，而是返回了info.phoneNumber。还是同样的问题。我在控制台日志中获取我的值，只需将返回的对象转换为我可以在我的模板中使用的数组。感谢您的尝试。我确实使用了data.map 而不是forEach，但结果是一样的。控制台日志返回所有电话号码，但不是数组。
.map() 和 .forEach() 的结果完全不同。 .map() 返回一个数组，.forEach() 返回未定义。这个“控制台日志返回所有电话号码”在哪里？那个代码是从哪里来的？什么代码在调用你的函数 getPhone() ？那个代码是否有可能没有正确处理异步代码调用？
谢谢格雷格。感谢您的宝贵时间，并且解释非常有帮助。

【解决方案2】：

我在帮助下解决了这个问题，我希望这可能对其他人在获取对文档中 1 个特定字段的访问权时有所帮助。在我的服务中：

async getPhone() {
    return await this.afs.collection('members', ref => ref.where('phoneNumber', '>=', 0))
    .get().toPromise()
    .then(snapshot => {
      if (snapshot.empty) {
        console.log('No Matches');
        return;
      }
      return this.getInfoNum(snapshot.docs);
      });
    }
    getInfoNum(data) {
      return data.map(doc => {
        let info = doc.data();
        return info.phoneNumber
      });
  }

在我的组件中使用打字稿

phoneNumbers: string[] = [];

getPhone() {
    this.dbService.getPhone().then(phoneNumbers => {
      this.phoneNumbers = phoneNumbers;
      this.smsGroupForm.controls.number.setValue(phoneNumbers.join(',')) //sets array seperated by commas
      console.log(phoneNumbers);
    });
  }

这将返回逗号分隔数组中的所有电话号码。

在我的模板中，我将数字拉入另一个函数的输入以发送多个文本。模板中的代码还没有针对表单进行完善，我现在只是在那里。

 <ion-list>
       <ion-item *ngFor="let phoneNumber of phoneNumbers">
       <ion-label position="floating">Phone Number</ion-label>
       <ion-input inputmode="number" 
        placeholder="Phone Number" 
        formControlName="number"
        type="number">{{ phoneNumber }}
       </ion-input>
       </ion-item>  
  </ion-list>

【讨论】：