如何在 BehaviourSubject 数组中搜索单个对象

Question

这里是 RxJS 新手，可能我完全错了...

我正在尝试通过对象的 ID 从 BehaviourSubject 数组中获取对象。

这是一些代码：

service.ts:

import { iBeer } from './../models/beer';
import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators'

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

private beers: iBeer[] = beerList;
private beerSubject = new BehaviorSubject<iBeer[]>(this.beers);
beers$ = this.beerSubject.asObservable();


getAll():Observable<iBeer[]>{
  return this.beers$
}

getById(id:number){
  return this.beers$.pipe(
    map(beer => beer.find(beer => beer.id === id)))
  }
}

component.ts:

import { BeerService } from './../beer.service';
import { iBeer } from './../../models/beer';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'shop',
  templateUrl: './shop.component.html',
  styleUrls: ['./shop.component.css']
})
export class ShopComponent implements OnInit {

  beers!: iBeer[];
  beerID?: iBeer;
  id:number = 0;

  constructor(private BeerService:BeerService) { }

  ngOnInit(): void {
  this.BeerService.getAll().subscribe(
    (data:iBeer[]) => this.beers = data);


  this.BeerService.getById(this.id).subscribe(
    (data) => this.beerID = data)
  }

  selectedID(id:number){
    this.BeerService.getById(id).subscribe(
      (data) => this.beerID = data)
  }
}

我遇到以下问题：

onInit 正确调用并显示具有默认 id 值的对象。如果我尝试从 html 输入中插入另一个 ID，它会正确地转到服务方法，但它总是 return undefined.
我试图删除 onInit 中的调用。如果我使用默认 ID 进行第一次调用，它会正确显示相关项目，但是如果默认 ID 是例如 3 并且我从 Html 输入中为第一次调用设置 1，它 return未定义。

我该如何解决这个问题？

Answer 1

getById(id:number){
  return this.beerSubject.value.find((beer) => beer.id === id);
}

如何在 BehaviourSubject 数组中搜索单个对象

How to search for a single object in a BehaviourSubject array

javascript

rxjs

typescript

angular