Primero debe crear un sujeto de comportamiento, la propiedad especial del sujeto de comportamiento es que podemos tener un valor de inicialización. Luego, cuando se completa cada llamada a la API, podemos actualizar el asunto con el valor más reciente.

Obtenga más información sobre el tema del comportamiento

html

 <div class="container"> <div class="list" *ngIf="studentDataSubject | async as studentData"> <div *ngFor="let student of studentData"> <div>{{ student.name }}</div> <button class="btn" [disabled]="student.enable">Add to course</button> </div> </div> <div class="list" *ngIf="courseDataList | async as courseData"> <div *ngFor="let course of courseData"> <div>{{ course.name }}</div> </div> </div> </div>

t

 import { Component, OnInit, VERSION } from '@angular/core'; import { BehaviorSubject, map, Observable, switchMap, tap } from 'rxjs'; import { IStudentData, getStudentList, ICourseData, getCourseList, } from './dummyApi'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { studentDataSubject: BehaviorSubject<any> = new BehaviorSubject<any>([]); name = 'Angular ' + VERSION.major; studentDataList: Observable<IStudentData[]> = getStudentList(); // no delay courseDataList: Observable<ICourseData[]> = getCourseList(); // data comes after 3 seconds ngOnInit() { this.studentDataList .pipe( switchMap((studentData) => { this.studentDataSubject.next(studentData); return this.courseDataList.pipe( tap((courseData) => { const newStudentData = studentData.map((student) => { let dummyStudentObj = { ...student, enable: student.courseCount < courseData.length, }; return dummyStudentObj; }); this.studentDataSubject.next(newStudentData); }) ); }) ) .subscribe(); } }

apilado bifurcado