Firebase Cloud Firestore noSQL答案

【问题标题】：Firebase Cloud Firestore noSQLFirebase Cloud Firestore noSQL
【发布时间】：2018-06-07 21:04:35
【问题描述】：

该数据库包含用户、问题和答案的集合。见下文

Users
------
firstName
lastName

Questions
-------
date
question

Answers
-------
date
answer
questionId
userId

用例：获取用户的答案以及这些答案的问题。显示问题和答案

我的代码：

    //User Questions with Answers
this.db.collection('Answers', ref => ref.where('userId', '==', userId) ).snapshotChanges()
  .subscribe(data => {
    return data.map(a => {
      const data = a.payload.doc.data();
      console.log(data);
      console.log(data.questionId);
      //qa.answers.push(data);

      //Get each question from the answer now
      // bummer that this is a seperate request, very chatty
      var question = this.db.collection('Questions')
        .doc(data.questionId).valueChanges()
          .subscribe(ref => {

            console.log(ref);
            return ref;
          });   

      return {data, question};
    });
  });

2 个问题：

这是最好的方法吗？它会调用服务器以获取每个答案的问题。看起来很健谈。
它确实设法获取了数据，虽然很健谈，但现在我该如何显示它？

谢谢，我是 noSQL 和 Firebase 的新手。

【问题讨论】：

“看起来很健谈。”有点模糊。如果您担心性能，我建议您对其进行测量。总的来说，我发现这些类型的查询比开发人员预期的性能要好得多。

标签： javascript angular firebase google-cloud-firestore

【解决方案1】：

2——如何显示？ “展示它”在哪里？在前端~？

如果使用AngularFire，你可以试试：

在.ts中

answersCol : AngularFirestoreCollection<Answers>;
answersObersArray: Observable<Answers[]>;
answersArray: Array<Answers>;

this.answersCol  = this.db.collection('survey/' + userId);
this.answersObersArray = this.answersCol .valueChanges();

this.answersObersArray .subscribe(answers => {
   this.answersArray = answers ;//--Working with arrays
});

在.html中

<table class="table table-bordered">
  <tbody *ngFor="let answer of answersArray ">
         <tr style="font-weight:bold">
           <td>{{ answer  }}</td>
          </tr>
  </tbody>
</table>

（已测试）

如果使用 Observable，可以试试：

在.ts中

var answersCol = this.db.collection('answers/' + userId');//Check ur struct
answersObservArray: Observable<Answers[]>; //If you have a Answers class

this.answersObservArray= this.answersCol.valueChanges();

在.html中

<h4 class="title"> {{ (answersObservArray| async)}}</h4>

（未经过全面测试）

【讨论】：