title: Angular nesting async ngFor
body: <p>I'm currently developing an application with angular. I reached a very strange problem with the <code>*ngFor</code> template directive:</p>
  
  <pre><code>&lt;div *ngfor="let accountGroup of groupedAccountsList"&gt;
      &lt;h3 class="accounts__identifier"&gt;
          {{accountGroup.key}}
      &lt;/h3&gt;
      &lt;table class="datalist"&gt;
          &lt;tr class="datalist__header"&gt;
              &lt;th class="datalist__column"&gt;
                  {{ 'accounts.number' | translate }}
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr *ngfor="let account of accountGroup.accounts" class="datalist__row"&gt;
              &lt;td class="datalist__column"&gt;
                  {{account.accountNumber}}
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code does work, when I do subscribe to my observable and do the grouping myself. Actually, is there any way to use the <code>async</code> pipe in a nested way?</p>
  
  <p>I tried to use the following code to produce the grouped observable with code, but so far, I've been unlucky to actually subscribe to the nested observable.</p>
  
  <pre><code>this.resourceService
      .getAccounts(data.client.id)
      .subscribe(accounts =&gt; {
          let hash = {};
          for (let acc of accounts) {
              if (!hash[acc.relationship.id]) {
                  hash[acc.relationship.id] = [];
              }
              hash[acc.relationship.id].push(acc);
          }
          this.groupedAccountsList = Object.keys(hash).map(key =&gt; {
              return {
                  key,
                  accounts: hash[key]
              };
          });
      });
  </code></pre>
  
  <p>All the grouping has to be done by custom synchronous code. Something like the following must be possible (IMO)</p>
  
  <pre><code>this.groupedAccountsList = this.resourceService
      .getAccounts(data.client.id)
      .flatMap&lt;AccountModel&gt;(o =&gt; Observable.from(o))
      .groupBy&lt;string, AccountModel&gt;(o =&gt; o.relationship.id)
      .map(o =&gt; {
           return {
               key: o.key,
               accounts: o.toArray()
          };
      })
      .toArray()
  </code></pre>
  
  <p>Is there a general mistake in my understanding of observables and RxJS or is the nested async pipe not working?</p>
  
  <p>Cheers</p>