Angular 6: mat-таблица [dataSource] отображает только первую запись из массива данных

Question

Я хочу перечислить записи в формате mat-table. Мой массив данных, как показано на скриншоте ниже.

Как видно из журнала консоли изображения, он имеет две записи, но в списке таблиц отображает только первую запись.

Вот мой компонент, в котором я получаю записи из сервисов API. Поскольку я получаю записи через array.map(), я помещаю записи в переменную массива и вызывал мою функцию в ngAfterViewInit() метод жизненного цикла.

export class RecordComponent implements OnInit, AfterViewInit {
  displayedColumns = ['id', 'name',];
  data = [];
  recordList: any;

  ngOnInit() {
    this.recordList = new MatTableDataSource(this.data);
  }

  ngAfterViewInit() {
    this.getRecordListList();
  }

  getRecordListList() {
    var Arr = []
    this.recordList.data = [];
    this.apiService.getProductId(this.params.id).subscribe((response:any) => {
      let data = response.data[0]
      let productData = data.design_product
      productData.map((productid) => {
        this.apiService.getSelectedProductById(productid.selected_product_id).subscribe((response:any) => {
          if(response.data !== null) {
            Arr.push(response.data[0])
            this.recordList = Arr
            this.data = Arr;
            console.log(this.recordList) // line no 59 as displayed in the screenshot
          }
        })
      })
    })
  }
}

Вот мой HTML компонент.

<mat-table [dataSource]="recordList">
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef >Sr No</mat-header-cell>
    <mat-cell *matCellDef="let element; let i = index"> {{i+1}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef >Name</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Answer 1

попробуйте

if(response.data !== null) { 
  this.data = response.data;
  this.recordList = new MatTableDataSource(this.data);
}