Angular/Firestore 集合文檔查詢將所有文檔中的單個文檔字段返回到數組中

Question

我正在對我的集合文檔執行查詢，並嘗試將所有電話號碼返回到一個數組中。 我只想將電話號碼設置為數組以供另一個 function 使用。 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;
      })
  }```

Answer 1

Firestore 是一個“文檔存儲數據庫”。 您一次獲取並存儲整個 DOCUMENTS（想想“JSON 對象”）。 使用文檔存儲數據庫時的“反模式”之一是以 SQL/關系數據庫術語來考慮它們。 在 SQL/關系數據庫中，您“規范化”數據。 但是在文檔存儲數據庫（“NoSQL”數據庫）中，我們顯式地對數據進行非規范化——也就是說，我們在寫操作時跨文檔復制數據。 這樣，當您獲取一個文檔時，它就會包含您使用案例所需的所有數據。 您通常希望避免“JOIN”並限制數據 model 中的引用/鍵的數量。

您在上面的代碼中顯示的內容在獲取文檔和從每個文檔中提取phoneNumber字段方面是有效的。 但是，使用.forEach()可能不是您想要的。 forEach()遍歷給定數組並運行 function，但forEach()的返回值是undefined 。 因此，您代碼中的return info.phoneNumber實際上並沒有做任何事情。

您可以改為使用.map() ，其中 map() function 的返回值是一個新數組，其中原始數組的每個條目都包含一個條目，並且該新數組的值是 map()' 的返回值s 回調參數。

此外，混合await和.then()/.catch()通常不是一個好主意。 它通常會導致意想不到的結果。 我嘗試使用await和try/catch ，並盡可能避免使用.then()/.catch() 。

所以我會 go 類似：

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;
  });

Answer 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
      });
  }

在我使用 typescript 的組件中

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);
    });
  }

這將返回逗號分隔數組中的所有電話號碼。

在我的模板中，我將數字拉入另一個 function 的輸入以發送多個文本。 模板中的代碼還沒有針對表單進行完善，我現在只是在那里。

 <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>