错误TypeError：无法读取未定义的属性“ val”

Question

我正在尝试从Firebase获取键和值。我的目标是获取键和值，然后存储在this.listData中。我尝试了不同的方法，但没有一个对我有用。任何解决方案都表示赞赏。

以下是文件：

1. admin-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. admin-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”。

我的主要目标是从firebase中获取键和值，并将其填充到Angular Material DataTable中，然后进行排序，过滤和搜索值。不要推荐任何文档或教程。