У меня есть массив JSON с 4 элементами в angular 7, но он показывает 0, когда я спрашиваю его длину

У меня есть API, который отвечает на запрос объекта JSON. Все выглядит нормально, но когда я хочу получить доступ к элементам этого массива JSON, он показывает 0 элементов вместо истинного значения.

это моя просьба:

private request(type: 'getall'|'getonebyid'|'addnew'|'editbyid'|'deleteonebyid',
                  mp?: IMeasurementInterfaces,
                  id?: string): Observable<any> {
  let base;
  this.serverUri = 'http://localhost:3000'; // localhost

  if (type === 'getall') {
    base = this.http.get<MeasurementDetails[]>(`${this.serverUri}/mea/${type}`);
  }
  const request = base.pipe(
    map((data: any) => {
      return data;
    })
  );
  return request;
}

функция запроса вызова:

public getall(): Observable<MeasurementDetails[]> {
    return this.request('getall');
}

заполнение mpserv, объявленного в файле component.ts:

this.mpserv.getall().subscribe(
  x => {
    x.forEach(element => {
      this.mp.push(element);
    });
  },
  err => console.error('Observer got an error: ' + err),
  () => console.info('Observer got a complete notification')
);

когда я запрашиваю console.info(this.mpserv), он отвечает так:

Я использовал this.mp в качестве источника данных таблицы данных:

<div class = "measurement-type-grid">
<div class = "measurement-type-list">
<table mat-table [dataSource] = "dataSource">

  <!-- Position Column -->
  <ng-container matColumnDef = "position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef = "let element"> {{element.position}} </td>
  </ng-container>

  <!-- title Column -->
  <ng-container matColumnDef = "title">
    <th mat-header-cell *matHeaderCellDef> title </th>
    <td mat-cell *matCellDef = "let element"> {{element.title}} </td>
  </ng-container>

  <!-- description Column -->
  <ng-container matColumnDef = "description">
    <th mat-header-cell *matHeaderCellDef> description </th>
    <td mat-cell *matCellDef = "let element"> {{element.description}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef = "symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef = "let element"> {{element.symbol}} </td>
  </ng-container>

  <!-- Edit Column -->
  <ng-container matColumnDef = "edit">
    <th mat-header-cell *matHeaderCellDef> Edit </th>
    <td mat-cell *matCellDef = "let element">
      <button mat-icon-button color = "primary">
        <mat-icon aria-label = "Edit data">edit</mat-icon>
      </button>
    </td>
  </ng-container>

  <!-- Delete Column -->
  <ng-container matColumnDef = "delete">
    <th mat-header-cell *matHeaderCellDef> Delete </th>
    <td mat-cell *matCellDef = "let element">
      <button mat-icon-button color = "primary">
        <mat-icon aria-label = "Delete data">delete_forever</mat-icon>
      </button>
    </td>
  </ng-container>

  <!-- Add New Column -->
  <ng-container matColumnDef = "add new">
    <th mat-header-cell *matHeaderCellDef> Add New </th>
    <td mat-cell *matCellDef = "let element">
      <button mat-icon-button color = "primary">
        <mat-icon aria-label = "Delete data">add_circle</mat-icon>
      </button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
  <tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [pageSizeOptions] = "[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
</div>

Я использовал эту функцию для заполнения данных в источник данных:

filltoelements(mdata: MeasurementDetails[]) {
// console.info(mdata);
if (!mdata) {
  console.info('data is undefined!!!!');
} else {
  let i: number;
  i = -1;
  mdata.forEach(element => {
    i++;
    this.ELEMENT_DATA[i].position = i + 1;
    this.ELEMENT_DATA[i].title = element.measureTitle;
    this.ELEMENT_DATA[i].description = element.measureDescription;
    this.ELEMENT_DATA[i].symbol = element.measureSymbol;
    this.ELEMENT_DATA[i].edit = 'edit';
    this.ELEMENT_DATA[i].delete = 'delete';
    this.ELEMENT_DATA[i].addNew = 'addNew';
  });
}
}

и я определил его в component.ts:

displayedColumns: string[] = ['position', 'title', 'description', 'symbol', 'edit', 'delete', 'add new'];
dataSource = new MatTableDataSource<MeasureTypeElemetns>(this.ELEMENT_DATA);

и вернул 0 как длину массива, а моя таблица данных пуста:

у тебя есть идеи?