Angular - Источник данных не определен после ответа HTTP

Question

Я хочу создать таблицу с оценками некоторых студентов за курс, если у студента еще нет оценки, мой бэкэнд возвращает 404, в этом случае я хочу вернуть новую оценку. Моя проблема:
Я пытаюсь получить оценку каждого ученика за раз (один запрос на получение для каждого ученика), но когда мой компонент инициализируется (после завершения ngOnInit), мой источник данных представляет собой массив undefined. Я пробовал использовать .toPromise () и .then (), но не смог заставить его работать, та же проблема, проблема в том, что

this.dataSource.push(grade);

вызывается после инициализации компонента.
Вот мой component:

export class EditGradesComponent implements OnInit {
  students: StudentForm[] = new Array<StudentForm>();
  dataSource: Grade[] = new Array<Grade>();
  course: Course;
  displayedColumns: string[] = ['index', 'name', 'grupa', 'nota'];
  constructor(private studentService: StudentService,
              private gradeService: GradeService) {
    this.course = history.state.data.course;
    this.students = history.state.data.students;
    this.students.forEach((student: StudentForm) => {
      gradeService.getGradeByCourseAndStudent(this.course, student).toPromise().then((grade: Grade) => {
        this.dataSource.push(grade);
      });
    });
  }

  ngOnInit() {
  }

}

Вот мой сервис

@Injectable({
  providedIn: 'root'
})
export class GradeService {


  private course: Course;
  private student: StudentForm;
  getGradeByCourseAndStudent(course: Course, student: StudentForm): Observable<Grade>{
    this.course = course;
    this.student = student;
    return this.http.get<Grade>(this.hostname + this.endpoint + '/student/'
        + student.sin + '/course/' + course.id, this.httpOptions).pipe(
          catchError(this.handleError));
  }

  private handleError(error: HttpErrorResponse): Observable<Grade> {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message
    let grade: Grade = new Grade();
    grade.course = this.course;
    grade.student = this.student;
    grade.grade = 0;
    return of(grade);
  }

}

My. html - это просто обычная мат-таблица, проблема в том, как я уже сказал, мой источник данных - это массив неопределенного значения при инициализации компонента;