Angular RXHJ แม็พคุณสมบัติหลายวัตถุ

Question

บริการของฉันส่งคืนอ็อบเจ็กต์พร้อมเหตุการณ์และคุณสมบัติการนับ ตอนนี้ฉันต้องทำสองคำขอ อันดับแรกจะได้รับเหตุการณ์และอันดับที่สองเพื่อนับเหตุการณ์ ฉันต้องการใช้ Observables ใน component และ async ไปป์ในเทมเพลต ฉันรู้วิธีที่จะบรรลุการสมัครรับบริการในส่วนประกอบ แต่ฉันต้องการเข้าใจวิธีการแมปทั้งสองเหตุการณ์และนับเป็นสิ่งที่สังเกตได้ด้วยคำขอเดียว ฉันควรใช้ตัวดำเนินการ RxJs อะไร

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

ดูเหมือนว่าการตอบสนองเป็นวัตถุที่มีคุณสมบัติeventsและcount. ดังนั้นคุณสามารถเริ่มต้นตัวแปรเดียว (เช่นevents$) ในคอนโทรลเลอร์และใช้ในเทมเพลตด้วยasyncไพพ์

นอกจากนี้คุณยังสามารถใช้ng-containerแท็กพร้อมกับ*ngIf's asสร้างเพื่อนำมาปล่อยก๊าซเรือนกระจกจากที่สังเกตได้ ng-containerไม่ได้นำไปสู่การแท็กเพิ่มเติมและมีการแสดงความคิดเห็นออกมาใน DOM สร้าง

ลองทำดังต่อไปนี้

ตัวควบคุม

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

เทมเพลต

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

ฉันใช้ตัวดำเนินการนำทางที่ปลอดภัย?.เพื่อหลีกเลี่ยงundefinedข้อผิดพลาดและjsonไปป์เพื่อแสดงevents.eventsวัตถุ

Answer 2

อีกทางเลือกหนึ่งสำหรับวิธีแก้ปัญหาของ Michael D ที่คุณสามารถทำได้

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