我再次在一个 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>这是我单击用户后开始的错误：
谁能帮我让界面等待一切完成？我尝试使用异步，但我有点无法理解它是如何在角度上起作用的。