Angular RXHJ mapeia propriedades de objetos múltiplos

Question

Meu serviço retorna objeto com eventos e propriedades de contagem. No momento, preciso fazer duas solicitações. Primeiro para obter eventos e segundo para obter a contagem de eventos. Eu gostaria de usar Observables no componente e tubo assíncrono no modelo. Eu sei como fazer isso assinando o serviço no componente, mas gostaria de entender como mapear ambos os eventos e contar para um observáveis ​​com uma solicitação. Qual operador RxJs devo 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 a resposta já é um objeto que contém as propriedades eventse count. Portanto, você pode inicializar uma única variável (por exemplo. events$) No controlador e usá-la no modelo com asynctubo.

Você também pode usar ng-containertag junto com *ngIfa asconstrução de para reutilizar as emissões do observável. O ng-containernão contribui para tags adicionais e são comentados no DOM gerado.

Tente o seguinte

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>

Usei o operador de navegação segura ?.para evitar undefinederros e jsoncanalização para renderizar o events.eventsobjeto.

Answer 2

Alternativamente à solução de Michael D, você pode fazer isso

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)
);