Angular RXHJ asigna múltiples propiedades de objetos

Question

Mi servicio devuelve objetos con eventos y propiedades de recuento. Ahora mismo necesito hacer dos solicitudes. Primero para obtener eventos y segundo para contar eventos. Me gustaría usar Observables en componente y tubería asíncrona en la plantilla. Sé cómo lograrlo suscribiéndome al servicio en el componente, pero me gustaría entender cómo mapear ambos eventos y contar como observables con una solicitud. ¿Qué operador de RxJs debo usar?

import { Component, OnInit } from '@angular/core';
import { Event } from '../event.model';
import { Observable } from 'rxjs';
import { EventsService } from '../events.service';
import { first, map, take } from 'rxjs/operators';

@Component({
selector: 'app-events-list',
templateUrl: './events-list.component.html',
styleUrls: ['./events-list.component.css']
})
export class EventsListComponent implements OnInit {

events: Event[];
a$: Observable<Event[]>; total$: Observable<number>;
pageSize: number = 100;
currentPage: number = 1;

constructor(private eventsService: EventsService) { }

ngOnInit(): void {

this.a$ = this.eventsService.getEvents(this.pageSize, this.currentPage).pipe( map(results => results.events) ); this.total$ = this.eventsService.getEvents(this.pageSize, this.currentPage).pipe(
  map(results => results.count)
);

 }

 }

Answer 1

Parece que la respuesta ya es un objeto que contiene las propiedades eventsy count. Entonces podría inicializar una sola variable (por ejemplo events$) en el controlador y usarla en la plantilla con asynctubería.

También puede usar la ng-containeretiqueta junto con *ngIfla asconstrucción de 's para reutilizar las emisiones del observable. El ng-containerno contribuye a etiquetas adicionales y se comentan en el DOM generado.

Prueba lo siguiente

Controlador

export class EventsListComponent implements OnInit {
  events: Event[];
  events$: Observable<any>;
  pageSize: number = 100;
  currentPage: number = 1;

  constructor(private eventsService: EventsService) { }

  ngOnInit(): void {
    this.events$ = this.eventsService.getEvents(this.pageSize, this.currentPage);
  }
}

Modelo

<ng-container *ngIf="(events$ | async) as events">
  Event: {{ events?.events | json }}
  Count: {{ events?.count }}
  
  <sample-comp [sampleInput]="events?.events"></sample-comp>
</ng-container>

He utilizado un operador de navegación seguro ?.para evitar undefinederrores y una jsontubería para representar el events.eventsobjeto.

Answer 2

Alternativamente a la solución de Michael D, puede hacer esto

const events$ = this.eventsService.getEvents(this.pageSize, this.currentPage).pipe( shareReplay(1), ); this.a$ = events$.pipe( map(results => results.events) ); this.total$ = events$.pipe(
  map(results => results.count)
);