title: Angular 6 / AngularFire migration
body: <p><strong>I have the following older Angular 4 code:</strong></p>
  
  <p>The <em>navigation.component.ts</em> file:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
  import { LogoComponent } from './logo.component';
  
  @Component({
      selector: 'app-navigation',
      templateUrl: './navigation.component.html'
  })
  
  export class NavigationComponent {
      items: FirebaseListObservable&lt;any[]&gt;;
      constructor(db: AngularFireDatabase) {
          this.items = db.list('/pages', { 
              query: {
                  orderByChild: 'sortOrder',
                  limitToLast: 100
              }
          });
      }
  }
  </code></pre>
  
  <p>The <em>navigation.component.html</em> file (truncated for brevity):</p>
  
  <pre><code>&lt;nav class="nav-standard"&gt;
      &lt;app-logo&gt;&lt;/app-logo&gt;
      &lt;div class="nav-dropdown"&gt;
          &lt;ul *ngFor="let item of items | async | filter : 'parent' : '00000000-0000-0000-0000-000000000000'" class="nav-dropdown"&gt;
              &lt;li&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;   
      &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;nav class="nav-narrow"&gt;
      &lt;app-logo&gt;&lt;/app-logo&gt;
      &lt;md-menu #menu="mdMenu" class="nav-dropdown nav-narrow-dropdown"&gt;
          &lt;ul *ngFor="let item of items | async | filter : 'parent' : '00000000-0000-0000-0000-000000000000'" class="nav-dropdown nav-narrow-dropdown"&gt;
              &lt;li&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;   
      &lt;/md-menu&gt;
      &lt;button md-icon-button [mdMenuTriggerFor]="menu" class="expand-button"&gt;
          &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
      &lt;/button&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>which I am trying to convert to Angular 6 [and got this far]:</strong></p>
  
  <p>The <em>navigation.component.ts</em> file:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
  import { LogoComponent } from './logo.component';
  
  @Component({
      selector: 'app-navigation',
      templateUrl: './navigation.component.html'
  })
  
  export class NavigationComponent {
      items: AngularFireList&lt;any[]&gt;;
      constructor(db: AngularFireDatabase) {
          this.items = db.list('/pages');
      }
  }
  </code></pre>
  
  <p>The <em>navigation.component.html</em> file (truncated for brevity):</p>
  
  <pre><code>&lt;nav class="nav-standard"&gt;
      &lt;app-logo&gt;&lt;/app-logo&gt;
      &lt;div class="nav-dropdown"&gt;
          &lt;ul *ngFor="let item of items | async | filter : 'parent' : '00000000-0000-0000-0000-000000000000'" class="nav-dropdown"&gt;
              &lt;li&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;   
      &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;nav class="nav-narrow"&gt;
      &lt;app-logo&gt;&lt;/app-logo&gt;
      &lt;mat-menu #menu="matMenu" class="nav-dropdown nav-narrow-dropdown"&gt;
          &lt;ul *ngFor="let item of items | async | filter : 'parent' : '00000000-0000-0000-0000-000000000000'" class="nav-dropdown nav-narrow-dropdown"&gt;
              &lt;li&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;   
      &lt;/mat-menu&gt;
      &lt;button mat-icon-button [matMenuTriggerFor]="menu" class="expand-button"&gt;
          &lt;mat-icon&gt;more_vert&lt;/mat-icon&gt;
      &lt;/button&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>This is throwing an error: </p>
  
  <blockquote>
    <p>ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
        at invalidPipeArgumentError (common.js:4238)
        at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._selectStrategy (common.js:4845)
        at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe (common.js:4835)
        at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform (common.js:4817)
        at Object.eval [as updateDirectives] (NavigationComponent.html:4)
        at Object.debugUpdateDirectives [as updateDirectives] (core.js:11922)
        at checkAndUpdateView (core.js:11315)
        at callViewAction (core.js:11556)
        at execComponentViewsAction (core.js:11498)
        at checkAndUpdateView (core.js:11321)</p>
  </blockquote>
  
  <p>It appears that switching to the new AngularFireList is breaking the <em>ngFor</em>?   I am a bit confused as to why?</p>