• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

283
Views
¿Cómo NO puedo esperar a que lleguen ambos observables y usar datos de 1 observable en swtichmap?

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.

https://stackblitz.com/edit/angular-ivy-trnr9r?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2FdummyApi.ts,src%2Fapp% 2Fapp.módulo.ts

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error