• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

286
Vistas
¿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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda