Angular HTML不等待我的控件完成加载

Question

我还是在努力解决Angular问题。在我的TS文件中，我正在调用3个API，以基于特定的选定用户为我带来数据，并且将所有这些数据合并到一个对象中以在界面中统一显示它们，但是，我的HTML页面不会等待对象完成构建，并且显示出大量错误。

这是我的打字稿代码：

import { Trainee } from '../trainees.model';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { TraineesService } from '../../trainees.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Course } from '../../courses/courses.model';
import { CoursesService } from '../../courses.service';
import { Assignment } from '../../assignments/assignments.model';
import { traineeCourses } from '../../assignments/traineeCourses.model';
import { courseAssignments } from '../../assignments/courseAssignments.model';
import { NgForm } from '@angular/forms';
import { AssignmentsService } from '../../assignments.service';


@Component({
  selector: 'app-trainee-details',
  templateUrl: './trainee-details.component.html',
  styleUrls: ['./trainee-details.component.css']
})


export class TraineeDetailsComponent implements OnInit, OnDestroy {

  public selectedDates : any = {};
  public enrolledTrainers: any = {};
  private traineeId: string;
  trainee: Trainee;
  assignments: Assignment[] = [];
  courses: Course[] = [];
  counter: number;
  traineeCourses: traineeCourses = {
    id: null,
    assignments: null,
    courses: null,
    trainee: null  };
  public isLoading = true;
  private courseSub: Subscription;
  private assignmentSub: Subscription;
  courseAssignments: courseAssignments[] = [];
  courseAssignment: courseAssignments;
  coursesdisplayColumns = ['courseOrderID', 'courseTitle','courseDescription','duration','scheduledDate','trainer','save'];
  
  constructor(public traineeService: TraineesService, public route: ActivatedRoute, public coursesService: CoursesService, public assignmentsService: AssignmentsService)
  {
  }

  ngOnInit() {
    this.route.paramMap.subscribe((paramMap: ParamMap) => {
      if(paramMap.has('traineeId')){
        this.traineeId = paramMap.get('traineeId');
        this.trainee = this.traineeService.getTrainee(this.traineeId);
        this.traineeCourses.trainee = this.trainee;
      }
    });
    this.getData();
  }

 async getData()
 {
  await this.coursesService.getCoursesByJob(this.trainee.job);
  await this.assignmentsService.getAssignmentsForTrainee(this.trainee.id);
  this.courseSub = await this.coursesService.getCoursesUpdateListener().subscribe((courses: Course[]) =>{
    this.courses = courses;
    this.traineeCourses.courses = this.courses
    console.log('Promise Y resolved.');
  });

  await this.assignmentsService.getAssignmentsForTrainee(this.trainee.id);
  this.assignmentSub = await  this.assignmentsService.getAssignmentUpdateListener().subscribe((assignments: Assignment[]) => {
    this.assignments = assignments;
    this.traineeCourses.assignments = this.assignments;
    this.traineeCourses.courses.forEach(element => {
      this.courseAssignment = {
        id: null,
        courseID: element.id,
        courseDescription: element.description,
        courseOrderID: element.courseOrderID,
        courseTitle: element.title,
        duration: element.duration,
        trainer: null,
        scheduledDate: null
      };
      this.traineeCourses.assignments.forEach(element => {
        if(this.courseAssignment.courseID == element.courseID)
        {
          this.courseAssignment.trainer = element.trainer;
          this.courseAssignment.scheduledDate = element.scheduledDate;
        }
      });
    this.courseAssignments.push(this.courseAssignment);
    });
    this.isLoading = false;
    console.log('Promise X resolved.');
  });
  console.log(this.courseAssignments);
 } 

  onDelete(traineeId: string)
  {
    this.traineeService.deleteTrainee(traineeId);
  }

  onSaveAssignment(trainee: Trainee, selectedCourse: Course, selectedDate: Date, enrolledTrainer: string){
  
    this.assignmentsService.addAssignment(selectedCourse.id, trainee.id, enrolledTrainer, selectedDate);
    console.log(trainee.id);
    console.log(selectedCourse.id);
    console.log(selectedDate);
    console.log(enrolledTrainer);
  }

  ngOnDestroy() {
    this.assignmentSub.unsubscribe();
    this.courseSub.unsubscribe();
  }
}

您可以在上面的代码中看到，我先为每个条目创建一个对象courseAssignment，然后我将每个条目推入我在HTML中使用的courseAssignments中，以在表中循环它。

这是我的HTML代码：

<mat-card>
    <mat-spinner *ngIf="isLoading"></mat-spinner>
    <form  #traineeForm="ngForm" *ngIf="!isLoading">
      <mat-form-field>
        <input  readonly matInput type="text" name="name" [ngModel] = "trainee.name"  #name="ngModel">
      </mat-form-field>
      <mat-form-field>
        <input readonly matInput email type="text"  name="email" [ngModel] = "trainee.email" #email="ngModel">
      </mat-form-field>
      <mat-form-field>
        <input readonly matInput type="text"  name="type" [ngModel] = "trainee.type" #type="ngModel">
      </mat-form-field>
      <button mat-raised-button color ="primary" type ="submit">Edit</button>
      <button mat-raised-button color ="warn" type ="submit" (click)="onDelete(trainee.id)">Delete</button>
    </form>
  </mat-card>
<br>
  <mat-card *ngIf="!isLoading">
    
      <table mat-table [dataSource]="courseAssignments" class="mat-elevation-z8" >
      
      <ng-container matColumnDef="courseOrderID">
        <th mat-header-cell *matHeaderCellDef>Course Order ID</th>
        <td mat-cell *matCellDef="let element"> {{element.courseOrderID}}</td>
      </ng-container>
      
       <ng-container matColumnDef="courseTitle">
          <th mat-header-cell *matHeaderCellDef>Course Title </th>
          <td mat-cell *matCellDef="let element"> {{element.courseTitle}}</td>
      </ng-container>

      <ng-container matColumnDef="courseDescription">
          <th mat-header-cell *matHeaderCellDef>Course Description </th>
          <td mat-cell *matCellDef="let element"> {{element.courseDescription}}</td>
       </ng-container>

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

      <ng-container matColumnDef="scheduledDate">
        <th mat-header-cell *matHeaderCellDef>Scheduled Date </th>
      <td mat-cell *matCellDef="let element; let i = index">
         <mat-form-field>
              <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDates[i]" placeholder="Choose a date">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>
         {{element.scheduledDate}}</td>
      </ng-container>

      <ng-container matColumnDef="trainer">
          <th mat-header-cell *matHeaderCellDef>Trainer </th>
          <td mat-cell *matCellDef="let element; let i = index">
              <mat-form-field><input matInput color="warn" *ngIf="!element.trainer" [(ngModel)]="enrolledTrainers[i]"></mat-form-field> {{element.trainer}}</td>
      </ng-container>

      <ng-container matColumnDef="save">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let element; let i = index">
              <button mat-raised-button color ="primary" type ="submit" (click)="onSaveAssignment(trainee, element, selectedDates[i], enrolledTrainers[i])">Save</button></td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="coursesdisplayColumns">
      </tr>
      <tr mat-row *matRowDef="let courses; columns: coursesdisplayColumns"></tr>
      </table>
      <br>
 
      </mat-card>

---

这是我单击用户后开始出现的错误：

有人能帮助我让界面等待一切完成吗？我尝试使用异步，但是我有点无法理解它如何以角度运行。