asyn c жду не буду ждать

Question

У меня есть заметка, на которую я подписываюсь для вызова API. У меня есть несколько методов, которые должны принять ответ от этого вызова API, сделать небольшие вычисления и затем отобразить их в таблице в моем интерфейсе.

Мои методы не ждут, пока наблюдаемое разрешится, прежде чем они запустятся, хотя я использую asyn c await Это происходит в четырех разных файлах (data.service.ts, dashboard.component.ts, Overview.component.ts и Overview.component. html), потому что я считаю, что это самая чистая установка.

Весь мой соответствующий код:

data.service.ts

async getTotalData(data: Promise<any[]>) {

    const myArrayResolved: any[] = await data;

    let i: string | number;
    let allData: any[] = [];

    for (i in myArrayResolved) {
      // <- now I do my array stuff
      if (myArrayResolved[i].ReturnStatus === 1) {
        allData = allData.concat(
          myArrayResolved[i].DataList
        );
      }
    }
    return allData;
  }

dashboard.component.ts

jsonStored = [];
jsonLoaded: Promise<boolean>;
ngOnInit() {
    const observables = this.data.map(data =>
      this.time.getPunchDataWeek(data.id)
    );
    forkJoin(observables).subscribe(
      results => {
        this.jsonStored.push(results);
        console.log("Getting JSON from API call...");
        this.jsonLoaded = Promise.resolve(true);
      },
      err => {
        console.error(err);
      },
      () => {//So I know when the response is sent
        console.log(
          "------------------complete callback has finished----------------------"
        );

      }
    );
  }

  async getActual(weekDay: string, date: string | number | Date) {
    let d = new Date(date);
    d = this.time.setStartOfWeek(d);

    let i = 1;
    let index = 0;
    this.weekdays.forEach(element => {
      if (weekDay === element) {
        index = i;
        if (index === 7) {
          index = 0;
        }
      }
      i++;
    });


    let response = await this.time.getTotalData(this.jsonStored[0]);

    //Some debugging and just returning 1 as a placeholder
    console.log(response);

    return 1;
  }

Overview.component.ts

  tableStats() {
    for (this.i in this.dash.weekdays) {
      this.SHIFTSTATS_DATA.push({
        day: this.dash.weekdays[this.i],
        requested: 2,
        provided: 2,
        ontime: 2,
        actual: this.dash.getActual(this.dash.weekdays[this.i], new Date())
      });
    }
    return this.SHIFTSTATS_DATA;
  }
dataSource = this.tableStats();

review.component. html

<mat-card>
    <table
      mat-table
      *ngIf="this.dash.jsonLoaded | async; else loading"
      [dataSource]="dataSource"
    >
      <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

      <ng-container matColumnDef="day">
        <th mat-header-cell *matHeaderCellDef>Day</th>
        <td mat-cell *matCellDef="let shift">{{ shift.day }}</td>
        <td mat-footer-cell *matFooterCellDef>Total</td>
      </ng-container>

      <ng-container matColumnDef="requested">
        <th mat-header-cell *matHeaderCellDef>Requested</th>
        <td mat-cell *matCellDef="let shift">{{ shift.requested }}</td>
        <td mat-footer-cell *matFooterCellDef>{{ getTotalRequested() }}</td>
      </ng-container>

      <ng-container matColumnDef="provided">
        <th mat-header-cell *matHeaderCellDef>Provided</th>
        <td mat-cell *matCellDef="let shift">{{ shift.provided }}</td>
        <td mat-footer-cell *matFooterCellDef>{{ getTotalProvided() }}</td>
      </ng-container>

      <ng-container matColumnDef="ontime">
        <th mat-header-cell *matHeaderCellDef>On Time</th>
        <td mat-cell *matCellDef="let shift">{{ shift.ontime }}</td>
        <td mat-footer-cell *matFooterCellDef>{{ getTotalOnTime() }}</td>
      </ng-container>

      <ng-container matColumnDef="actual">
        <th mat-header-cell *matHeaderCellDef>Actual</th>
        <td mat-cell *matCellDef="let shift">
          {{ shift.actual }}
        </td>
        <td mat-footer-cell *matFooterCellDef>{{ getTotalActual() }}</td>
      </ng-container>

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

    <ng-template #loading>Loading Punch Data...</ng-template>
  </mat-card>

Консольный вывод

* ZoneAwarePromise выводит примерно 6 или 7 раз, но я решил сократить этот короткий

ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
Getting JSON from API call...
------------------complete callback has finished----------------------