ОШИБКА TypeError: Невозможно прочитать свойство 'val' из неопределенного

Question

Я пытаюсь получить ключи и значения из базы огня. Получение ключей и значений, а затем сохранение в this.listData - моя цель. Я пробовал разные способы, но ни один не помог мне. Любое решение приветствуется.

Ниже приведены файлы:

1. админа products.component.ts

   listData: MatTableDataSource<any>;
     displayedColumns: string[] = ['title'];
     ngOnInit() {
       this.productService.getAll().subscribe(list => {
         let array =  list.map(c => 
           {
            return { $key: c.key, ...c.payload.val() }
           });
         this.listData = new MatTableDataSource(array);
         console.log("What is here ", this.listData);
       })}
   

2. админ-products.component.html

   <div class="mat-elevation-z8">
       <mat-table [dataSource]="listData">
           <ng-container matColumnDef="title">
               <mat-header-cell *matHeaderCellDef>Title</mat-header-cell>
               <mat-cell *matCellDef="let element"></mat-cell>
           </ng-container>
           <mat-header-row *matHeaderRowDef="displayedcolumns"></mat-header-row>
           <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
       </mat-table>
       <mat-table [dataSource]="listData">
           <ng-container matColumnDef="title">
               <mat-header-cell *matHeaderCellDef>Title</mat-header-cell>
               <mat-cell *matCellDef="let element"></mat-cell>
           </ng-container>
           <mat-header-row *matHeaderRowDef="displayedcolumns"></mat-header-row>
           <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
       </mat-table>
   

Я получаю ошибку:

Невозможно прочитать свойство 'val' из неопределенного.

Моя главная цель - получить ключи и значения из базы данных и заполнить их в Angular Material DataTable, а затем отсортировать, отфильтровать и найти значения. Рекомендую любую документацию или учебник.