何时使用 RxJS Observable<Object[]> 和 Observable<Object>？

Question

使用 Angular 6，我根据 hero app 定义了我的服务。如果一个方法应该返回多个值，我总是返回一个Observable<A[]>，如果我期望一个返回，例如如果方法是getById，我返回Observable<A>。

问题是，今天我想对返回的值数组之一执行groupBy()，我能找到的所有示例都使用Observable<A> 而不是Observable<A[]>、like this one。另外，看看answers here（I tried it，这只适用于~Observable<A>）和RxJS introduction（Observable: represents the idea of an invokable collection of future values or events.），看来我应该使用Observable<A>来收集像服务器返回一样的东西，但不是单值返回用什么？

示例服务：

  all(): Observable<T[]> {
    return this.httpClient.get<T[]>(this.urls().allURL());
  }

  paginate(pageRequest: any): Observable<Page<T>> {
    return this.httpClient.post<Page<T>>(this.urls().paginateURL(), pageRequest);
  }

  findOneById(id: number): Observable<T> {
    return this.httpClient.get<T>(this.urls().byIdURL(id));
  }

更新：

I made a sample project。我可以像这样使用数组 observables，但是我总是需要一个mergeMap。我知道，如果我使用 Observable<A[]> ，我将一次获取所有值，因为它们在一个数组中，但是如果我使用 Observable<A> ，我会一一获取它们，这就是为什么我不能使用它*ngFor 例如（期望数组）。问题是，当服务器同步返回一个集合时，我是否总是使用A[]，如果我使用异步数据，我是否还需要考虑其他场景。

import { Component, OnInit } from '@angular/core';
import { Observable, from, of, GroupedObservable } from 'rxjs';
import { distinct, map, mergeMap, toArray, groupBy } from 'rxjs/operators';

export class ModelA {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';

  models: Observable<ModelA[]>;
  distinctModels: Observable<ModelA[]>;
  groupedModels: Observable<ModelA[][]>;

  ngOnInit() {
    this.loadData();
  }

  loadData(): void {
    this.models = of([
      {id: 1, name: 'Name A'},
      {id: 2, name: 'Name A'},
      {id: 3, name: 'Name B'},
      {id: 4, name: 'Name C'}
    ]);

    this.distinctModels = this.models
        .pipe(
          mergeMap(models => models),
          distinct(m => m.name),
          toArray()
        );
    this.distinctModels.subscribe( m => console.log(m));

    this.groupedModels = this.models
        .pipe(
          mergeMap(models =>models),
          groupBy(model => model.name),
          mergeMap(toArray()),
          toArray()
        );
    this.groupedModels.subscribe( m => console.log(m));
  }
}

Answer 1

我不确定你想要什么。 If is a Group just Observable

export class AppComponent implements OnInit {
  people: any[] = [
   { name: 'Sue', age: 25 },
   { name: 'Joe', age: 30 },
   { name: 'Frank', age: 25 },
   { name: 'Sarah', age: 35 }
  ];
  result:any[][];

  ngOnInit()
  {
    this.myObservable().subscribe(res=>{
      this.result=res;
    })
  }

  myObservable():Observable<any[][]>
  {
    return from(this.people).pipe(
      groupBy((person:any)=>person.age),
      mergeMap(group=>group.pipe(toArray())),
      toArray());
  }

还有.html

  <div *ngFor="let ages of result">
    <strong>{{ages[0].age}}</strong>
    <div *ngFor="let item of ages">
      {{item.name}}
    </div>
  </div>