angular - BehaviorSubject Observable 上的运算符不起作用

Question

我有一个 Angular 应用程序，我在其中尝试将预订列表从服务器下载到 Angular 服务。我想让所有组件都能够将预订数组作为可观察对象获取，并能够过滤和限制结果。现在我正在使用 BehaviorSubject。这是我的代码。

//reservation.service.ts (partial code)

@Injectable()
export class TripService {
  public Trips: Object[] = [];
  public TripSubject: Subject<Object[]> = new BehaviorSubject<Object[]>([]);
  public trips$: Observable<Object[]> = this.TripSubject.asObservable();

  constructor(private apollo: Apollo) { 
    this.apollo.query({query: ReservationQuery}).subscribe((trips: any) => {
      this.Trips = trips.data.allReservations;      
      this.TripSubject.next(this.Trips)
    })
  }
}

//partial component

ngOnInit(): void {   
  this.tripService.trips$.take(3).subscribe(trips => {
    this.Trips = trips
  })
}

我得到了要填充的保留，但我得到了所有这些，而不仅仅是使用 take(3) 我想要的 3 个。 take 运算符不工作是否有原因？

Answer 1

正如@Yakov Fain 所说，您在一次 next() 调用中将整个数组发送给主题。

如果没有充分的理由让您将一个对象数组转换为一个Observables 数组，只需在您的数组中执行.slice():

ngOnInit(): void {   
  this.tripService.trips$.subscribe(trips => {
    this.Trips = trips.slice(0,3)
  })
}

否则，如果你真的想将它转换为一系列 Observables(以便你可以使用 .take(3))，那么你将需要使用 .from() :

ngOnInit(): void {
    this.tripService.trips$
        .switchMap(trips => Observable.from(trips));
        .take(3)
        .subscribe(trips=>{
            this.Trips = trips;
        });
}

请注意，获取对象数组和 Observable 数组的根本区别在于后者具有多个事件发射。

这是区别:

对象数组的单个 Observable，使用 .slice():

const arr = [1, 2, 3, 4, 5];
const observables = Observable.of(arr);

observables
    .subscribe(x => {
        this.Trips = x.slice(0, 3)
        console.log(this.Trips);
    });
    //output: [1,2,3] 
    //this.Trips is an array of length 3.

使用 .from() 从对象数组派生的多个 Observable:

const arr = [1, 2, 3, 4, 5];
const observables = Observable.from(arr);

observables
    .take(3)
    .subscribe(x => {
        this.Trips = x;
        console.log(this.Trips);
    });
    //output: 1
    //output: 2
    //output: 3
    //You got a single digit output, each are replaces the value of this.Trips on every emission.