title: Retrieve firebase list data to create a dynamic table
body: <p>I want to push the values into a array like below when i retrieve values from firebase database</p>
  
  <pre><code> columns: any[];
   this.columns = [
  { columnDef: 'FirstName', header: 'First Name',    cell: (element: any) =&gt; `${element.FirstName}` },
  { columnDef: 'LastName', header: 'Last Name',    cell: (element: any) =&gt; `${element.LastName}` },
  ];
  </code></pre>
  
  <p>Here is what i tried so far.........</p>
  
  <pre><code> this.af.list('/datalist', {
   query: {
      limitToLast: 200,
      orderByChild: 'name',
      equalTo: 'spiderman',
      preserveSnapshot: true
    }
   }).subscribe(snapshot=&gt;{
     if(snapshot!=undefined){
      snapshot.forEach(function(childSnapshot) {
  
      this.columns.push( { columnDef: childSnapshot.heroname, header: childSnapshot.herotitle,    cell: (element: any) =&gt; `${element.heroname}` });
      this.displayedColumns = this.columns.map(c =&gt; c.columnDef);
  
      return false;
      });
     }
    });
  </code></pre>
  
  <p>Error with above code is 
  Cannot read property 'columns' of undefined</p>
  
  <p>Even though i declared the columns array globally its not recognizing it.</p>
  
  <p>In HTML i want to use like this....</p>
  
  <pre><code>   &lt;ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef"&gt;
      &lt;mat-header-cell *cdkHeaderCellDef&gt;{{ column.header }}&lt;/mat-header-cell&gt;
      &lt;mat-cell *cdkCellDef="let row"&gt;{{ column.cell(row) }}&lt;/mat-cell&gt;
     &lt;/ng-container&gt;
  </code></pre>
  
  <p>Any hint is appreciated. Thank you.</p>