Angular RXHJ 映射多个对象属性

Question

我的服务返回带有事件和计数属性的对象。现在我需要做两个请求。首先获取事件，然后获取事件计数。我想在模板中的组件和异步管道中使用 Observables。我知道如何通过订阅组件中的服务来实现它，但我想了解如何通过一个请求将这两个事件映射并计数到一个可观察对象。我应该使用什么 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 的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)
);