En este código a continuación, quiero que la lista de estudiantes se muestre de inmediato y no esperar al segundo observable, pero cuando llegue el segundo observable, debe verificar que el estudiante no esté inscrito en todos los cursos y luego habilitar el botón para agregar al curso.
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(); } }