невозможно отобразить данные json из S3 в angular

Question

Я пытаюсь отобразить в своем приложении Angular содержимое выборки Json файла в корзине S3; Я использую усиление, чтобы сохранить мой json файл в корзине S3 и извлечь его;

Я могу получить данные, но они не будут отображаться в таблице

Мой компонент выглядит так

import {Component, OnInit} from '@angular/core';
import {MatDialog} from "@angular/material/dialog";
import {PopupNewTrainingComponent} from "../../components/popup-new-training/popup-new-training.component";
import {TrainingS3} from "../../domain/training-s3";
import {S3Service} from "../../services/s3.service";
import {Storage} from "aws-amplify";


@Component({
  selector: 'app-coach-training',
  templateUrl: './coach-training.component.html',
  styleUrls: ['./coach-training.component.css']
})
export class CoachTrainingComponent implements OnInit {
  public displayedColumns: string[] = ['name', 'start', 'end', 'daysOfTheWeek', 'option'];
  public trainings: TrainingS3[] = [];
  public training: TrainingS3;
  public keys = [];



  constructor(public dialog: MatDialog, private serviceS3: S3Service) {
  }

  ngOnInit() {
    this.getS3TrainingNew();
  }

  newTraining(training?: TrainingS3) {
    const dialogPop = this.dialog.open(PopupNewTrainingComponent, {
      width: '750px',
      data: {
        training: training || new TrainingS3(),
        trainingJson: Object
      }
    });

    dialogPop.afterClosed().subscribe(result => {
      if (result) {
        // saveAs(result.trainingJson, ;
        this.saveToS3(result.training, result.trainingJson);
      }
    });

  }


  saveToS3(training, trainingJson) {
    this.serviceS3.uploadFile(trainingJson, training);
  }

  getS3TrainingNew() {
    this.getKeyListFromS3()
      .then(() => {
        this.keys.forEach(key => {
          this.getJsonFromKeyS3(key.key)
            .then(() => {
              console.log(this.trainings);
              return this.trainings
            })
        })
      })
  }

  async getKeyListFromS3() {
    await Storage.list('new/')
      .then(result => {
        result.forEach(key => {
          this.keys.push(key)
        })
        return this.keys;
      })
      .catch(err => console.log(err));
  }

  async getJsonFromKeyS3(key) {
    await Storage.get(key, {level: 'public', download: true})
      .then(result => {
        this.trainings.push(JSON.parse(this.serviceS3.Utf8ArrayToStr(result.Body)));
        return this.trainings;
      })
      .catch(err => console.log(err));
  }

  deleteTraining(training: TrainingS3) {
    // this.training = training;
    // const dialogRef = this.dialog.open(ConfirmDialogComponent, {
    //   width: '350px',
    //   data: {
    //     title: 'Suppression',
    //     message: 'Êtes-vous sûr de vouloir supprimer cet entrainement?'
    //   }
    // });
    //
    // dialogRef.afterClosed().subscribe(result => {
    //   if (result) {
    //     this.doDelete();
    //   }
    // });
  }
}

И я пытаюсь отобразить данные в table

<div class="head">
  <div>Trainings</div>
  <button mat-raised-button (click)="newTraining()">New training</button>
</div>

<div class="desktop">
  <ul *ngIf="trainings">
    <li *ngFor="let training of trainings">{{training.name}} {{training.start}} {{training.daysOfTheWeek}} {{json.memberCategory}}</li>
  </ul>

  <table mat-table [dataSource]="trainings">
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let element">
        <div>{{element.name}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="start">
      <th mat-header-cell *matHeaderCellDef>Start</th>
      <td mat-cell *matCellDef="let element">
        <div>{{element.start}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="end">
      <th mat-header-cell *matHeaderCellDef>End</th>
      <td mat-cell *matCellDef="let element">
        <div>{{element.end}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="daysOfTheWeek">
      <th mat-header-cell *matHeaderCellDef>Type</th>
      <td mat-cell *matCellDef="let element">
        <div> {{element.daysOfTheWeek}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="option">
      <th mat-header-cell *matHeaderCellDef>Options</th>
      <td mat-cell *matCellDef="let element">
        <div class="actions">
          <button mat-raised-button (click)="newTraining(element)"><i class="material-icons">
            create
          </i></button>
          <button mat-raised-button (click)="deleteTraining(element)"><i class="material-icons">close</i></button>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

Данные, которые я пытаюсь собрать, представляют собой json файл как таковой

{
"name":"master summer training",
"start":"2020-04-01T04:00:00.000Z",
"end":"2020-10-31T04:00:00.000Z",
"memberCategory":"master",
"daysOfTheWeek":[0,2,4,5,6]
}