title: Cannot find a differ supporting object '[object Object]' of type 'object'. angularfire2
body: <p>I'm new using angularfire2. Let's say, I want to list every item, but I also want to get the profile' name using <code>*ngFor</code>. however, I have this error :</p>
  
  <pre><code> Cannot find a differ supporting object '[object Object]' of type
   'object'. NgFor only supports binding to Iterables such as Arrays.
  </code></pre>
  
  <p>I have this kind of data </p>
  
  <pre><code>- items
    - id
      - name: string
      - type : string
      - userId: string
  
  - profile
    - id
      - username: string
  </code></pre>
  
  <p>this is my code </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { IonicPage, NavController, NavParams } from 'ionic-angular';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import { Item } from '../../models/item';
  import { profile } from '../../models/profile';
  import { AngularFireDatabase } from 'angularfire2/database';
  
  @IonicPage()
  @Component({
    selector: 'page-timeline',
    templateUrl: 'timeline.html',
  })
  export class TimelinePage {
    item = {} as Item ;
    userId : string;
    profile  = {} as Profile;
    items: Observable&lt;any[]&gt;;
    profile: Observable&lt;any[]&gt;;
  
  
    constructor(
      private afDatabase : AngularFireDatabase,
      public navCtrl: NavController,
      public navParams: NavParams) {
      this.afDatabase.object(`profile/${c.payload.val().userId}`)
      this.dataItem = this.afDatabase.list('items' );
      this.dataProfile = this.afDatabase.list('profile/');
  
    }
  
  ngOnInit(){
      this.items = this.dataItem.snapshotChanges().map(items =&gt; {
          return this.items.map(item =&gt; {
            this.item.userId.map(profile =&gt; {
              this.dataProfile.subscribe(c =&gt; {
                profile = c;
                //console.log(profile);
                });
            });
            return this.items;
          });
        });
        console.log(this.items)
    }
  
  }
  </code></pre>
  
  <p>my html code</p>
  
  <pre><code>&lt;ion-list color="primary"&gt;
    &lt;ion-item *ngFor="let item of items | async"&gt;
      &lt;h2&gt;{{item.name}}&lt;/h2&gt;
      &lt;p&gt;{{item.type}}&lt;/p&gt;
      &lt;p&gt;{{item.username}}&lt;/p&gt;
      &lt;button ion-button clear item-end&gt;View&lt;/button&gt;
    &lt;/ion-item&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>thank you</p>