title: ERROR TypeError: Cannot read property 'val' of undefined
body: <p>I'am trying to get the keys and values from the firebase. Getting the keys and values and then storing in this.listData is my target. I have tried different ways, but none worked for me.Any solution appreciated.</p>
  
  <p>Following are the files:</p>
  
  <ol>
  <li><p>admin-products.component.ts</p>
  
  <pre><code>listData: MatTableDataSource&lt;any&gt;;
    displayedColumns: string[] = ['title'];
    ngOnInit() {
      this.productService.getAll().subscribe(list =&gt; {
        let array =  list.map(c =&gt; 
          {
           return { $key: c.key, ...c.payload.val() }
          });
        this.listData = new MatTableDataSource(array);
        console.log("What is here ", this.listData);
      })}
  </code></pre></li>
  <li><p>admin-products.component.html</p>
  
  <pre><code>&lt;div class="mat-elevation-z8"&gt;
      &lt;mat-table [dataSource]="listData"&gt;
          &lt;ng-container matColumnDef="title"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt;Title&lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;&lt;/mat-cell&gt;
          &lt;/ng-container&gt;
          &lt;mat-header-row *matHeaderRowDef="displayedcolumns"&gt;&lt;/mat-header-row&gt;
          &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
      &lt;mat-table [dataSource]="listData"&gt;
          &lt;ng-container matColumnDef="title"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt;Title&lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;&lt;/mat-cell&gt;
          &lt;/ng-container&gt;
          &lt;mat-header-row *matHeaderRowDef="displayedcolumns"&gt;&lt;/mat-header-row&gt;
          &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
  </code></pre>
  
  <p></p></li>
  </ol>
  
  <p>The error I'am getting is: </p>
  
  <blockquote>
    <p>Cannot read property 'val' of undefined. </p>
  </blockquote>
  
  <p>My main goal is to get keys and values from firebase and populate it in Angular Material DataTable and then sort , filter, search the values. Do recommend any documentation or tutorial.</p>