Take operator on BehaviorSubject Observable is not working
I have an Angular app where I am trying to get a list of orders uploaded from the server to an Angular service. I want to give all components the ability to get the reservation array as observable and be able to filter and limit the results. Right now I am using BehaviorSubject. Here is my code.
//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
})
}
I am getting reservations to fill, but I am getting all of them, not just the 3 I want, using take (3). Is there any reason why the operator is not working?
source to share
As Jacob Fine said, you are sending the entire array to the topic in one next () call.
Unless there is a good reason to convert an array of objects to an array Observables
, just do .slice()
on your array:
ngOnInit(): void {
this.tripService.trips$.subscribe(trips => {
this.Trips = trips.slice(0,3)
})
}
Otherwise, if you really want to convert it to a sequence of Observables (so you can use it .take(3)
), you will need to use .from()
:
ngOnInit(): void {
this.tripService.trips$
.switchMap(trips => Observable.from(trips));
.take(3)
.subscribe(trips=>{
this.Trips = trips;
});
}
Note that the main difference between getting an array of objects and an array of Observables is that the latter has multiple event ejections.
Here's the difference:
Single observation of an array of objects using .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.
Multiple observables derived from an array of objects using .from()
:
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.
source to share