有效地过滤一组可观察量

Question

我正在学习官方 angular 教程 (https://angular.io/tutorial/toh-pt4)。原谅我水平低:(

我正在尝试修改 returns 英雄列表的服务...作为 rxjs 的可观察对象，因为这是最有效的方法

hero.service.ts
==============

import {Injectable} from '@ angular / core';

import {Observable, of} from 'rxjs';

import {Hero} from './hero';
import {HEROES} from './mock-heroes';
import {MessageService} from './message.service';

@Injectable ({
  providedIn: 'root',
})
export class HeroService {

  constructor (private messageService: MessageService) {}

  getHeroes (): Observable <Hero []> {
    // TODO: send the message _after_ fetching the heroes
    this.messageService.add ('HeroService: fetched heroes');
    return of (HEROES);
  }
}

mock-heroes
===========

import {Hero} from './hero';

export const HEROES: Hero [] = [
  {id: 11, name: 'Mr. Nice '},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombast'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'}
];

我想要一个服务，当我传递一个 idreturns 只有一个英雄

import {Injectable} from '@ angular / core';
import {Hero} from './hero';
import {HEROES} from './mock-heroes';
import {Observable, of} from 'rxjs';
import {MessageService} from './message.service';
import {map} from 'rxjs / operators';

@Injectable ({
  providedIn: 'root'
})
export class HeroService {

  private heroes: Observable <Hero []>;

  getHeroes (): Observable <Hero []> {
    this.messageService.add ('HeroService: fetched heroes');
    // return of (HEROES);
    this.heroes = of (HEROES);
    return this.heroes;
  }

  getHeroeById (id: number): Observable <Hero> {
    this.messageService.add ('A hero is queried with id' + id);
    

    return this.heroes.pipe (map (x => x.id === id));
  }

  constructor (private messageService: MessageService) {}

 / * getHeroes (): Hero [] {
    return HEROES;
  } * /

  //builder() { }
}

src / app / hero.service.ts (26,5) 中的错误：错误 TS2322：类型 'Observable ' 不可分配给类型 'Observable '。类型 'boolean' 不可分配给类型 'Hero'。 src / app / hero.service.ts (26.40): TS2339 错误: 属性 'id' 在类型 'Hero []'.

上不存在

你能帮帮我吗？

Answer 1

你想return英雄列表中匹配id的英雄，尝试替换

return this.heroes.pipe (map (x => x.id === id));

来自

return this.heroes.pipe (map (heroes => heroes.find( hero => hero.id === id));

Answer 2

你有几个选择。您可以使用 Array.find() 或 Array.filter()

Array.filter()

getHeroeById (id: number): Observable <Hero> {
  this.messageService.add('A hero is queried with id: ' + id);

  // Filter heroes to get heroById
  return this.heroes.filter(x => x.id == id)[0];
}

Array.find()

getHeroeById (id: number): Observable <Hero> {
  this.messageService.add('A hero is queried with id: ' + id);

  // Find hero by Id.
  return this.heroes.find(x => x.id == this.personId);
}

Answer 3

你的问题是这一行：

return this.heroes.pipe (map (x => x.id === id));

你使用的是rx map操作符，它对流中的item进行操作和转换，案例中的stream item是实际的英雄数组。您将返回数组中某个不存在的 id 属性是否等于 id 参数（布尔值）的测试结果。这就是您看到错误的原因。

在这种情况下，您应该在流中的数组上使用数组查找运算符，因为您要在数组中查找该项目，如下所示：

return this.heroes.pipe (map (heroes => heroes.find(h => h.id === id)));

这样，您将在 rx 映射转换操作中返回数组查找操作的实际结果。

接下来，在调用 getHeroes() 之前，您不会初始化 heroes obersvable。这可能是有意的，但似乎您应该改为在构造函数中执行此操作，以便可以首先安全地调用 getHeroeById()。

有效地过滤一组可观察量

filtering an array of observables efficiently

rxjs

angular

rxjs6