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

Question

У меня есть 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.log('Observer got a complete notification')
);

когда я запрашиваю console.log (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.log(mdata);
if (!mdata) {
  console.log('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 в качестве длины массива, а моя таблица данных пуста:

у вас есть идеи?

Answer 1

Благодаря pjlamb12, Gilsdav и AjayReddy.

Я должен сделать это в рамках метода подписки.поэтому мой код должен выглядеть примерно так:

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

, тогда он будет работать правильно.