Angular RXHJ memetakan beberapa properti objek

Question

Layanan saya mengembalikan objek dengan peristiwa dan menghitung properti. Saat ini saya perlu melakukan dua permintaan. Pertama untuk mendapatkan acara dan kedua untuk menghitung acara. Saya ingin menggunakan Observables dalam komponen dan pipa async di template. Saya tahu cara mencapainya dengan berlangganan layanan dalam komponen, tetapi saya ingin memahami cara memetakan kedua peristiwa dan menghitung ke sebuah observable dengan satu permintaan. Operator RxJ apa yang harus saya gunakan?

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

Tampaknya responsnya sudah berupa objek yang berisi properti eventsdan count. Jadi Anda bisa menginisialisasi variabel tunggal (misalnya events$) di controller dan menggunakannya di template dengan asyncpipa.

Anda juga bisa menggunakan ng-containertag bersama dengan *ngIf's asmembangun untuk menggunakan kembali emisi dari diamati. Tidak ng-containerberkontribusi pada tag tambahan dan dikomentari di DOM yang dibuat.

Coba berikut ini

Kontroler

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

Template

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

Saya telah menggunakan operator navigasi yang aman ?.untuk menghindari undefinedkesalahan dan jsonpipa untuk merender events.eventsobjek.

Answer 2

Sebagai alternatif untuk solusi Michael D, Anda dapat melakukan ini

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