title: How to bind multiple query results in angularfire2 with firestore?
body: <p>I would like to use a collection to maintain relation between some documents as proposed <a href="https://stackoverflow.com/a/46780459/1139170">here</a> (but slightly modified approach). I have chosen collection approach because it seems more scalable that document properties over time.</p>
  
  <p>My actual data scructure</p>
  
  <pre><code>users
     user1
     user2
  
  companies
     co1
     co2
  
  user_co
     user1
         companies (collection)
             co1
             co2
  
     user2
         companies (collection)
             co1
  </code></pre>
  
  <p>But with that approach, I need to do multiple queries in order to get all available companies for a specific user as we cannot perform "IN" clause.</p>
  
  <p>So I need retrieve data in 2 steps:</p>
  
  <ol>
  <li>retrieve list of company user have access to in <code>user_co/{user}/companies</code></li>
  <li>retrieve actual companies from <code>/companies/{id}</code></li>
  </ol>
  
  <p>Why 2 steps? Because I don't want to give read access to all companies to all users and querying <code>/companies</code> would then trigger access error­.</p>
  
  <p>So I got struggle with how to retrieve a single bindable list of documents retrieved from multiple calls?</p>
  
  <p>I got 2 items displayed in my component but field values does not get displayed. I certainly do something wrong in the way I retrieve /company documents.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>MyService.ts</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>interface Company {
      Name: string;
      Owner: any;
      id?: any;
      time?: any;
      creationTime?: any;
  }
  
  interface MyCompany {
      id?: any;
      Name: string;
  }
  
  @Injectable()
  export class CompanyService {
  
      companiesCollection: AngularFirestoreCollection&lt;Company&gt;;
      myCompaniesCollection: AngularFirestoreCollection&lt;MyCompany&gt;;
      myCompanies;
  
      constructor(private afs: AngularFirestore, private ats: AuthService) {
  
          this.myCompaniesCollection = this.afs.collection('user_co').doc(this.ats.currentUserId).collection('companies');
          this.myCompanies = this.myCompaniesCollection.snapshotChanges().map(actions =&gt; {
              return actions.map(a =&gt; {
                  // What is the good way to retrieve /companies data from here?
                  return this.afs.firestore.collection("companies").doc(a.payload.doc.id).get().then(doc =&gt; {
                      return { id: doc.id, ...doc.data() }
                  }).catch(error =&gt; {
                      console.log("Error reading company document:", error);
                  });
                  // Original example that return data from /user_co
                  //return { id: a.payload.doc.id, ...a.payload.doc.data() }
              })
          });
      }
  
      getData() {
          return this.myCompanies;
      }
  }
  </code></pre>
  
  <p>using angularfire2 5.0.0-rc.3 with firebase 4.5.2</p>